Comment system with reply integration using jQuery & PHP

I am currently working on a comment system project. I am able to write a comment, save it onto my database, and retrieve it back and display it on a webpage. But then I am having trouble when I am incorporating a reply-to-comment function on top of my existing comment system. Problem 1: I have created 2 new clickables under each of the comment divs, fisrt is 'no.of replys', which shows new replys. Second is 'reply now', which is a textarea for users to reply to that comment. However when I click on either of them, all of the clickables open up in the rest of the comment divs instead of just the one I am clicking on. Problem 2: I am only able to reply and send my response to the database on the most recent comment div. When I try to reply on an older comment, the page refreshes itself and nothing records onto the database. Below are my markups. I am sorry if this is confusing, but English is not my first language. Any input would be appreciated.

<div class="timeline">

    <?php $stmt = $DB->query("CALL get_comment($aid)");
      $results = $stmt->fetchAll(); $stmt->closeCursor();
      foreach ($results as $info) {
      ?>

        <div class="commentBox">
            //The comment markup

             <p class="allreplys">Replys</p> //This opens all replys
             <p class="replyButton">Reply me</p> //This opens reply form

           <form class="replySection">
           //The reply form markup
           </form>

          <div class="replyTimeline">
            <?php
               $stmt = $DB->query<"CALL get_reply('$aid','$pid')");
               $replys = $stmt->fetchAll(); $stmt->closeCursor();
               foreach ($replys as $re) {
               ?>
                    <div class="replyBox>
                      //Reply Markups
                    </div>
               <?php } ?> //Close of reply foreach
           </div> //Close of replyTimeline

       </div> //Close of commentBox

   <?php } ?> //Close of comment foreach

</div> //Close of timeline

The following is my jQuery markup

$(document).ready(function() {
    $('.allreplys').click(function(event) {
       $('.replyline').toggle();
    });
    $('.replyButton').click(function(event) {
       $('.replySection').toggle();
    });
});

Solution

Does this work better?

My aim is to narrow down the selector you are using, which currently selects all elements of the entire page with the class name "allreplys" or "replyButton". By using $(this).parent(".commentBox").find(...

$(this) refers to the button that was clicked, in this case a p tag. "parent(...)" navigates up the nodes tree to get to a tag with the class name ".commentBox" and find(...) will search for the element with the selector given within that node and its children(and their children etc etc(recursive)). Hopefully only toggling one item instead of all.

Though I don't see a class called "replyline" in your code so that might be a point of failure.

$(document).ready(function() {
    $('.allreplys').click(function(event) {
       $(this).parent(".commentBox").find(".replyline").toggle();
    });
    $('.replyButton').click(function(event) {
       $(this).parent(".commentBox").find(".replySection").toggle();
    });
});