I've been stucked for hours on this, googled but still couldn't resolve it. I will appreciate some guidance please guys. I’m including a forum-like page on a php project I’m working on where users can comment on a post and then provision for replies to individual comments. My challenge is at the reply part of the code. I placed a reply button after the comments and when clicked fades out to show a textarea which users can type their replies. Now, when I click the reply button, it fades out which is ok, but the textarea appears for all the comments on the post. I tried introducing a data attribute(data-id) with a value of the post Id to bind the reply button clicked to the particular textarea to show but I can’t seems to wrap my head around this. Any help will be appreciated please. My Php code here:
<?php
require("includes/conn.php");
$stmt=$conn->prepare("SELECT post_id, user, topic, post, time FROM post_tb ORDER BY time DESC");
$stmt->execute();
$result = $stmt->get_result();
$num_of_rows = $result->num_rows;
if ($num_of_rows > 0){
while ($row = $result->fetch_assoc()){
$post_id = $row['post_id'];
$user = $row['user'];
$topic = $row['topic'];
$post = $row['post'];
$time = $row['time'];
$time = date('M dS, Y g:i A', strtotime($time));
echo '<div>
<div>
<h5><strong>'.$user.'</strong></h5><h6>'.$time.'</h6>
<h5><strong>'.ucfirst($topic).'</strong></h5>
<p data-id="'.$post_id.'">'.$post.'</p>
</div>
<div>
<button type="button" class="btn btn-primary rep" id="but_rep" data-id="'.$post_id.'">Reply</button>
</div>
<form id="comment_reply" data-id="'.$post_id.'" method="post" action="">
<input type="hidden" class="hidden" value="'.$post_id.'" id="post_id">
<textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea>
<button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button>
</form>
<div/>';
}
}
?>
and my jquery here:
<script>
$(document).on('click', 'button#but_rep', function(e){
e.preventDefault();
var buttonId = $('form input#post_id').val();
//$('button#but_rep[data-id="buttonId"]').fadeOut();
//$('form#comment_reply[data-id="buttonId"]').fadeIn();
$(this).fadeOut();
$("form#post_comment_reply").fadeIn();
});
</script>