Add Event Listeners to Newly Created Buttons (Vanilla JS)
<p>First off, I'm not trying to use Jquery for this, let's get that out of the way.</p>

<p>Cool, so I'm relatively new to working with vanilla JS, and I've got a page where I can click a button, and it adds a new <em>li</em> to a list. The new <em>li</em> contains a few things, but most importantly it contains it's own <em>ul</em>, with a few more <em>li</em>s, and its own button to be able to add more <em>li</em>s to this sub-list. </p>

<p>Here's what it looks like:</p>

<p><a href="https://i.stack.imgur.com/46b11.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/46b11.png" alt="enter image description here"></a></p>

<p>When you click 'add question', it successfully creates a new question with its own set of answers, and a new 'add answer' button. That button should allow adding more answers to the list, but I can't seem to bind events to the new buttons. I've made sure that they all have the same class, so ther querySelectoryAll shouldn't be a problem. The 'add answer' buttons that exist on pageload work fine, but the new ones don't seem to be seen but my code, or else are not being reassessed. Here's the code:</p>

<pre><code>// Get all 'add answer' buttons
var addAnswerElement = document.querySelectorAll(".addAnswer");

// Loop through the buttons
for (var i = 0; i &lt; addAnswerElement.length; i++) {

    // TODO: make sure this works on additional add 'answer buttons', not just the first :(
    addAnswerElement[i].addEventListener('click', function() {

}
</code></pre>

<p>Maybe this needs to be wrapped in a function that re-executes at some point? I'm just not familiar with how to do that, and haven't had luck describing to Google what or S.O. search what I'm trying to do.</p>