title: Conflict between two addEventListener
body: <p>I have two addEventListner methods. The first calls the function activateItem() (it adds a red background on a list item on click) and the second calls the function addItem() (it add a list element when we click on the button).</p>
  
  <p>From the time addItem() is called once, activateItem() can no longer be called and I don't understand why.</p>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
    &lt;title&gt;Javascript&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 id="title" &gt; Clik a list item to replace this text.&lt;/h1&gt;
    &lt;button id=button&gt;Add new item&lt;/button&gt;
    &lt;ul id=list&gt;
      &lt;li&gt;First item&lt;/li&gt;
      &lt;li&gt;Second item&lt;/li&gt;
      &lt;li&gt;Third item&lt;/li&gt;
      &lt;li&gt;Fourth item&lt;/li&gt;
      &lt;li&gt;Fifth item&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS code:</strong></p>
  
  <pre><code>var list = document.getElementsByTagName("li");
  var title = document.getElementById("title");
  var button = document.getElementById('button');
  var unorderedList = document.getElementById('list');
  var newItemCounter = 0;
  
  for(i=0;i &lt; list.length; i++){
    list[i].addEventListener("click", activateItem);
  }
  
  function activateItem(){
    title.innerHTML = this.innerHTML;
    this.style.backgroundColor = "red";
  }
  
  button.addEventListener("click", addItem);
  
  function addItem(){
    newItemCounter++;
    unorderedList.innerHTML += "&lt;li&gt;New item " + newItemCounter +  "&lt;/li&gt;";
  }
  </code></pre>