title: addEventListener not working for a HTML Button that is within a Django for loop
body: <p>I am trying to call a function when an HTML button is clicked, but right now, a <code>console.log</code> is supposed to run when the button is clicked, but nothing appears in the console. This button is within a for loop in Django and is being selected via <code>querySelector</code> through its class. I want only the specific button that is clicked to be selected, but I do not know if anything is being selected because nothing happens when the button is clicked.</p>
  <p>javascript</p>
  <pre><code>document.addEventListener('DOMContentLoaded', function(){
      document.querySelector('.edit_button').addEventListener('click', () =&gt; console.log(&quot;test&quot;));
  });
  </code></pre>
  <p>html</p>
  <pre><code>{% for post in page_obj.object_list %}
              &lt;div class = &quot;individual_posts&quot;&gt;
                  &lt;h6 id = &quot;post_itself&quot;&gt;{{ post.post }}&lt;/h6&gt;
                  {% if post.user == request.user %}
                      &lt;button id=&quot;editButton&quot; class=&quot;edit_button&quot;&gt;Edit&lt;/button&gt;
                  {% endif %}
              &lt;/div&gt;
  {% endfor %}
  </code></pre>