Hiding "write reply" textfield under each comment - php

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>