There can only be one of each ID in the entire DOM. You have an element with the id of "reply". Since the database is looping through all of the comments, there will be multiple elements with the id of "reply". This syntax is not correct.
Now, if you click on a button to toggle the element with the id of "reply", all of them will toggle. That's not what you want. Change the HTML to:
<button class="btn btn-primary btn-small">Reply</button><div class="reply"><form action="replycomment.php?videoid=<?php echo $_GET['id']; ?>&commentid=<?php echo $row['id']; ?>" method="post"> Reply Message: <br /><textarea name="comment" placeholder="Your comment..."></textarea><br /><input type="submit" name="submit" value="Post Reply" class="btn btn-warning"></form></div>Note that I have removed the id, and added the class. There can be multiple classes in a DOM. And so, the jQuery needs to hide all of the classes, so:
$(document).ready(function(){ $(".reply").hide(); // Hides all the elements with class="reply"});Now all we need is the button click action. If we just change the hashtag to the dot and make it a class, it still will toggle ALL of the elements with the class of reply. We need to just toggle the element that is right after the clicked button... right?
And so:
$(document).ready(function(){ $("#comments > div > button").click(function(){ $(this).nextAll('.reply:first').slideToggle(); // Gets all the next sibling elements under the same parent, and selects the first one with the class="reply" });});