jQuery仅在第一个forloop元素上起作用？

Question

Here is my Django template:

{% for feed in feeds %}
    <div id="feed"><b>At {{feed.location}}:<b> {{feed.msg}}</b></div></br>
    <button id="bb{{feed.id}}">Add Comment</button>
    <div id="commentbox" style="display:none;">
      <form method="post" action="/comment/{{feed.id}}/">
        {{cform.as_p}}
        <input type="submit" value="comment" />
      </form>
    </div>

{% endfor %}

Jquery code is here:

<script>
    $(function() {


          $("#bb.").click(function () {
          $("#commentbox").toggle("slow");
          });

    });
</script>

But here only the first div toggles inside the for loop. Jquery does not work for the remaining for loop elements. Can you please give me the proper jQuery code. Thanks.

Answer 1

make this change:

<button class="bb" id="bb{{feed.id}}">Add Comment</button>
<div class="commentbox" style="display:none;">

and this one:

$(document).ready(function() {
  $(".bb").each(function(){
    $(this).click(function () {
      $(this).next().toggle("slow");
    });
  });
});

Update: And here is a working demo .

Answer 2

As Tikhon suggests, using duplicate ID's is asking for trouble. Add a class to these elements and use a jQuery selector based on the class and you should be fine. Something like,

{% for feed in feeds %}
<div id="feed"><b>At {{feed.location}}:<b> {{feed.msg}}</b></div></br>
<button class="bb" id="bb{{feed.id}}">Add Comment</button>
<div class="commentbox" style="display:none;">
  <form method="post" action="/comment/{{feed.id}}/">
    {{cform.as_p}}
    <input type="submit" value="comment" />
  </form>
</div>
{% endfor %}

and

<script>
$(function() {
      $(".bb").click(function () {
          $(this).next('.commentbox').toggle("slow");
      });
});
</script>