Only the last Javascript event listener works

Question

It is very difficult for me to show you my code, as in everything, but I'm trying to do this:

I embed the html code in the DOM in the buy using function .innerHTML, I want to add the click event to the icon that is introduced in this step, since at the moment I know its id. Therefore, after I entered it, I write:

document.getElementById(product.id+"x").addEventListener("click", removeItem);

product.id is created above, and this element is the "X" button, which when pressed will be removed from the screen.

The problem is that this code is run many times, since many elements are displayed on the screen. And when finished, only the latter even made fires when the "X" button is pressed.

Any suggestions?

EDIT:

I can not use jquery in this project.

Here is my code:

function createHTML(targetID, product) {
    var target = document.getElementById(targetID);
    total = (parseFloat(total) + parseFloat(product.price)).toFixed(2);;
    target.innerHTML += '<article class="item" id="'+product.id+'"><img class="item_img" src="../'+product.image+'" width=100 height=100><h1 class="item_name">'+product.name+'</h1><p class="item_description">'+product.desc+'</p><h1 class="item_quantity">Quantity: '+product.quantity+'</h1><h1 class="item_price">&pound;'+product.price+'</h1><i id="'+product.id+'x" class="fa fa-times"></i></article>';

    document.getElementById(product.id+"x").addEventListener("click", removeItem, true);
}

Answer 1

, , innerHTML +=. . innerHTML , , (.. ).

. .

, DOM document.createElement() appendChild() / HTML. , .

DOM HTML, .

:

var container = document.getElementById("container");
var elem;

function clicky(){
    alert("clicked");   
}

for(var i=0; i<4; i++){
    elem = document.createElement('button');
    elem.id = "btn_" + i;
    elem.appendChild(document.createTextNode('Click'));
    elem.addEventListener("click", clicky);
    container.appendChild(elem);
}

Answer 2

, -

//Place where you add elements.
var container = document.body;

(button):

var button = '<button id="btn1x">Button 1</button>';
container.innerHTML += button;

//product.id = 'btn1';
document.getElementById(product.id+"x").addEventListener("click", removeItem);

, .

, , container, .

stringVariable += 'abc' stringVariable = stringVariable + 'abc'. - html.

, , .

var button = document.createElement('button');
button.id = product.id + 'x'; 
button.innerText = 'Button 1'; // Title of button.

//Add button to container.
container.appendChild(button);

//Add event listener to created button.
button.addEventListener('click', myFunc); 

---

UPDATE:

.

, html , temp ( , html), .

DEMO: http://jsfiddle.net/3cD4G/1/

HTML:

<div id="container">

</div>

Javascript:

var container = document.getElementById("container");

function clicky(){
    alert("clicked");   
}
var tempContainer = document.createElement('div');
for(var i=0; i<4; i++){
    //Create your element as string.
    var strElem = "<button type='button' id='btn_" + i + "'>Click</button>";
    //Add that string to temp container (his html will be replaced, not added).
    tempContainer.innerHTML = strElem.trim();//Trim function used to prevent empty textnodes before element.
    //Get element from temp container.
    var button = tempContainer.children[0];
    //Empty tempContainer for better security (But about which security I'm talking in JavaScript in string element generation :) )
    tempContainer.innerHTML = '';

    //Add your button to container.
    container.appendChild(button);

    //Add event listener to button:
    //document.getElementById("btn_" + i).onclick = clicky;
    //Better way to add event listener:
    button.addEventListener('click', clicky);
}

DEMO: http://jsfiddle.net/3cD4G/1/