title: Javascript only last event listener works
body: <p>It's very difficult for me to show you my code, as it's all over the place, but what I'm trying to do is this:</p>
  
  <p>I am injecting html code into the DOM in a function buy using <code>.innerHTML</code>, I wish to add a click event to an icon that is being injected in this step, as at this moment in time I know its id. So after I've injected it I write:</p>
  
  <p><code>document.getElementById(product.id+"x").addEventListener("click", removeItem);</code></p>
  
  <p><code>product.id</code> is created above and this element is a 'X' button, that when clicked will be removed from the screen.</p>
  
  <p>The trouble is, this code is run many times as there are many items to be displayed on the screen. And when finished, only the last even made fires when the 'X' button is pressed.</p>
  
  <p>Any suggestions?</p>
  
  <p>EDIT:</p>
  
  <p>I am unable to use jquery in this project.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function createHTML(targetID, product) {
      var target = document.getElementById(targetID);
      total = (parseFloat(total) + parseFloat(product.price)).toFixed(2);;
      target.innerHTML += '&lt;article class="item" id="'+product.id+'"&gt;&lt;img class="item_img" src="../'+product.image+'" width=100 height=100&gt;&lt;h1 class="item_name"&gt;'+product.name+'&lt;/h1&gt;&lt;p class="item_description"&gt;'+product.desc+'&lt;/p&gt;&lt;h1 class="item_quantity"&gt;Quantity: '+product.quantity+'&lt;/h1&gt;&lt;h1 class="item_price"&gt;&amp;pound;'+product.price+'&lt;/h1&gt;&lt;i id="'+product.id+'x" class="fa fa-times"&gt;&lt;/i&gt;&lt;/article&gt;';
  
      document.getElementById(product.id+"x").addEventListener("click", removeItem, true);
  }
  </code></pre>