我怎样才能让我的jQuery函数可用于foreach循环中的每个元素？

Question

I have a foreach loop displaying posts, all of them with a comment button

<button type="button" class="commentbtn" id="comment">
    <i class="em em-thought_balloon"></i>
</button>

The function itself is working fine, but only for the most recent post displayed, not the other ones. I'm trying to get it to work when each post comment button is clicked separately. This is the function

 $(document).ready(function(){
    $("#commentform").hide();
    $("#comment").click(function(event) {
        $("#commentform").show();
    });
});

Any ideas how I can fix this easily?

Edit: Here's the HTML I'm using, it's Laravel Collective

 {!! Form::open(['method'=>'POST','class'=>'commentForm']) !!}
 {!! Form::textarea('Comment', null, ['size'=>'50x2']) !!}
 {!! Form::button('Comment', ['type'=>'submit', 'class'=>'btn btn-primary'])!!}
 {!! Form::button('Cancel', ['class'=>'btn btn-default cancelComment']) !!}
 {!! Form::close() !!}

Answer 1

$("#commentform").hide();
$(".commentbtn").each(function(index){
    $(this).click(function(event) {
        $(this).next().find(".commentform").show();
    });
});

This will work when any button is pressed.

Update: I changed the #commentform id selector to .commentform .

This will work if your .commentform is below the button.

---

UPDATE:

I don't know laravel but I guess the resulting html for the form you provided is is:

  <form method="POST" class="commentForm">
     <textarea name="Comment" cols="50" rows="2"></textarea>
     <button name="Comment" type="submit" class="btn btn-primary">Comment</button>
     <button name="Cancel" class="btn btn-default cancelComment">Cancel</button>
  </form>

And the comment button you said earlier:

  <button type="button" class="commentbtn" id="comment">
     <i class="em em-thought_balloon"></i>
  </button>

This is your solution with plain js, it hides each form and it displays each one when you click the .commentbtn button:

  'use strict';
  window.addEventListener('load', () => {
     document.querySelectorAll('.commentForm').forEach(form => {
        form.style.display = 'none'; // Hide all the forms
     });
     document.querySelectorAll('.commentbtn').forEach(button => {
        button.addEventListener('click', event => {
           // Show the corresponding form
             event.target.parentNode.querySelector('.commentForm').style.display = 'block';
        });
     });
  });

And the jquery version:

  $(document).ready(function(){
     $('.commentForm').each(function(index){
        $(this).hide(); // Hide all the forms
     });
     $('.commentbtn').each(function(index){
        // Show the corresponding form
        $(this).parend().find('.commentForm').show();
     });
  });

This will ONLY work if you wrap each form - button html with a container like this:

  <div>
     <form method="POST" class="commentForm">
        <textarea name="Comment" cols="50" rows="2"></textarea>
        <button name="Comment" type="submit" class="btn btn-primary">Comment</button>
        <button name="Cancel" class="btn btn-default cancelComment">Cancel</button>
     </form>
     <button type="button" class="commentbtn" id="comment">
        <i class="em em-thought_balloon"></i>
     </button>
  </div>

Answer 2

You are using same ID multipal time to bind via loop. Dont Do this. Use class.

$(".commentform").hide();
    $(".commentbtn").click(function(event) {
       $(this).next().find('.commentform').show();
  });