title: How to select the individual id of an HTML element that is within a for loop in a Django template?
body: <p>I am trying to select an HTML button that is within a for loop in a Django template using a <code>querySelector</code> to add an event listener to it in JavaScript. How do you create a unique id for the button and select it through JavaScript? Right now, I have one id set to the button within the for loop, and when you press the button, nothing happens.</p>
  <p>html</p>
  <pre><code>% for post in page_obj.object_list %}
              &lt;div class = &quot;individual_posts&quot;&gt;
                  &lt;a href=&quot;{% url 'username' post.user %}&quot;&gt;&lt;h5 class = &quot;post_user&quot;&gt;{{ post.user }}&lt;/h5&gt;&lt;/a&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>
  <p>JavaScript</p>
  <pre><code>document.addEventListener('DOMContentLoaded', function(){
      document.querySelector('#editButton').onclick = edit_email();
  })
  </code></pre>