Hiding "write reply" textfield under each comment

Question

I'm working on my school project which is gallery, a clone of flickr and unsplash really. Right now I was working on comments system which works rather well all things considered, but I also want to add replies under those comments and having textfields under each comment seems clunky, so I wrote small jQuery script for it:

This is test file for this part of the code, as I don't want to ruin something in the main project if something happens. PHP/HTML

<?php 

    require_once 'header.php';

    if(isset($_POST['submit-comment']))
    {
        require_once 'includes/dbh.inc.php';

        $userUid = "Bob";
        $comment = $_POST['comment-input'];
        $pageId = 24;
        $parentId= -1;
        $date = date("Y-m-d H:m:s");

        $sql = "INSERT INTO comments(commentsPageId, commentsParentsId, commentsUseruid, commentsContent, commentsDate) VALUES (?,?,?,?,?);";
        $stmt = mysqli_stmt_init($conn);
        if(!mysqli_stmt_prepare($stmt, $sql))
        {
            echo "OPPSIE!";
        }
        else
        {
            mysqli_stmt_bind_param($stmt, "iissi", $pageId, $parentId, $userUid, $comment, $date);
            mysqli_stmt_execute($stmt);
        }
        mysqli_stmt_close($stmt);
    }


    $sqlSec = "SELECT commentsId, commentsUseruid, commentsContent, commentsDate FROM comments WHERE commentsPageId=24;";
    $stmtSec = mysqli_stmt_init($conn);
    if(!mysqli_stmt_prepare($stmtSec, $sqlSec))
    {
        echo "OPPSIE!";
    }
    else
    {
        mysqli_stmt_execute($stmtSec);
        $result = mysqli_stmt_get_result($stmtSec);
        echo '
                <div class="comments_container">
                    <div class="comment-post">
                        <form action="" method="post">
                            <textarea name="comment-input" cols="100" rows="4" style="resize: none;" placeholder="Write your comment..."></textarea>
                            <button type="submit" name="submit-comment">Post comment</button>
                        </form>
                    </div>
                    <div class="comments">
                ';
        while($row = mysqli_fetch_assoc($result))
        {
            $commentId = $row["commentsId"];
            echo '
            <div class="comment_'.$commentId.'"?
                <div class="header">
                    <p class="name" style="color: black;">'.$row["commentsUseruid"].'</p>
                    <span class="date">'.$row["commentsDate"].'</span>
                </div>
                <p class="content" style="color: black;">'.$row["commentsContent"].'</p>  
                <div class="reply_'.$commentId.'">
                    <form action="" method="post">
                        <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
                        <button type="submit" name="submit-comment">Post comment</button>
                    </form>
                </div>
                <button class="replybtn_'.$commentId.'">Reply</button>
            ';
        }
        echo '</div>';
        echo '</div>';
    }
?>

jQuery

    var id= '<?php echo $commentId; ?>';
    var reply = ".reply_";
    var selectorReply = reply.concat(id);
    var replybtn = ".replybtn_";
    var selectorBtn = replybtn.concat(id);
    $(selectorBtn).click(function(){
        $(selectorReply).toggle()
    });

This kinda works, but while($row = mysqli_fetch_assoc($result)), just spins through all id's and stops at the last one, so all reply buttons only work on the last comment. Question is how do I apply this script to all comments, instead of only the last so that reply buttons show textfields that are appropriate?

Answer 1

Instead of writing jquery code for all button individually you can write your event handler like this $("button[class*=replybtn_]").click(function() { so this event will get called when any button has class i.e :replybtn and anything after that word. As you have use _ to attach id as well you can use split("_")[1] this will give you value after _ then using this you can toggle your reply div.

Demo Code:

$("button[class*=replybtn_]").click(function() {
  console.log($(this).attr("class").split("_")[1])
  var ids = $(this).attr("class").split("_")[1];
  $(".reply_" + ids).toggle()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="comments_container">

  <div class="comments">

    <div class="comment_123">
      <div class="header">
        <p class="name" style="color: black;">123</p>
        <span class="date">12/10/2002</span>
      </div>
      <p class="content" style="color: black;">All Goood..</p>
      <div class="reply_123">
        <form action="" method="post">
          <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
          <button type="submit" name="submit-comment">Post comment</button>
        </form>
      </div>
      <button class="replybtn_123">Reply</button>
    </div>
    ----------------------------------------------
    <div class="comment_231">
      <div class="header">
        <p class="name" style="color: black;">231</p>
        <span class="date">12/10/2001</span>
      </div>
      <p class="content" style="color: black;">All Goood or not..</p>
      <div class="reply_231">
        <form action="" method="post">
          <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
          <button type="submit" name="submit-comment">Post comment</button>
        </form>
      </div>
      <button class="replybtn_231">Reply</button>
    </div>
    ---------------------------------------
    <div class="comment_456">
      <div class="header">
        <p class="name" style="color: black;">456</p>
        <span class="date">12/10/1992</span>
      </div>
      <p class="content" style="color: black;">All Aweomese Goood..</p>
      <div class="reply_456">
        <form action="" method="post">
          <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
          <button type="submit" name="submit-comment">Post comment</button>
        </form>
      </div>
      <button class="replybtn_456">Reply</button>
    </div>
  </div>