title: How to append "delete button" to EVERY list item that is newly created in JS?
body: <p>Shopping List exercise using JS DOM.
  My full code: <a href="https://codepen.io/lil_a/pen/BaQKvqZ?editors=0110" rel="nofollow noreferrer">https://codepen.io/lil_a/pen/BaQKvqZ?editors=0110</a></p>
  <p>I have to add a new &quot;Delete&quot; button to every newly created list item. I managed to do that, but it only appends the button I created to the last list item, not other newly added items too. How to do it so there's a new delete button for every list item?</p>
  <p>I've searched through similar questions, but generally, the codes were different from mine and I'd have to redo it all. Is there a way to do it with my code?</p>
  <p>HTML</p>
  <pre><code>    &lt;h1&gt;Shopping List&lt;/h1&gt;
      &lt;p id=&quot;first&quot;&gt;Get it done today&lt;/p&gt;
      &lt;input id=&quot;userinput&quot; type=&quot;text&quot; placeholder=&quot;enter items&quot;&gt;
      &lt;button id=&quot;enter&quot;&gt;Enter&lt;/button&gt;
      &lt;ul id = &quot;list&quot;&gt;
          &lt;li&gt;Notebook&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/li&gt;&lt;br&gt;
          &lt;li&gt;Jello&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/li&gt;&lt;br&gt;
          &lt;li&gt;Spinach&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/li&gt;&lt;br&gt;
          &lt;li&gt;Rice&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/li&gt;&lt;br&gt;
          &lt;li&gt;Birthday Cake&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/li&gt;&lt;br&gt;
          &lt;li&gt;Candles&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/li&gt;&lt;br&gt;
      &lt;/ul&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>function createListElement() {
      var li = document.createElement(&quot;li&quot;);
      li.appendChild(document.createTextNode(input.value));
      ul.appendChild(li).addEventListener(&quot;click&quot;, toggleList); 
      //append and toggle on and off new list items
      input.value = &quot;&quot;;
      ul&gt;li.appendChild(deleteButton).addEventListener(&quot;click&quot;, removeItem); 
      //append &quot;delete button&quot; to newly added &quot;li&quot;
  }
  
  var elements = document.getElementsByClassName(&quot;btn&quot;);
      for (var i = 0; i &lt; elements.length; i++){
      elements[i].addEventListener(&quot;click&quot;, removeItem);
  }
    
  function removeItem(){
  this.parentNode.remove();
  }  
  
  var deleteButton = document.createElement(&quot;button&quot;);
  deleteButton.setAttribute(&quot;class&quot;, &quot;btn&quot;);
  deleteButton.appendChild(document.createTextNode(&quot;Delete&quot;));
  </code></pre>