How use JQuery closest() in Post and comment system - php

Question

I have a post and comment system. Something like facebook post and comment system. The post display properly but the comments only display for the first post i.e the post displayed at the top. Am on able to submit comment on all other posts except the first post.
The problem on which I need your assistance is as follows:
-The comments for each of the posts should display correspondently.
-To be able to submit comments for the other posts.
These what I have done.
View:
<div class="box-footer" style="display: block;">
<form id="com" class="com" method="post">
<div class="img-push">
<input type="hidden" class="status_id" id="status_id" name="status_id" value="<?php echo $post['spid']; ?>">
<textarea name="comment" id="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>
<div class="box-footer box-form">
<btn class="btn btn-azure btn-sm pull-right commentbt" id="commentbt">Comment</btn>
<ul class="nav nav-pills">
<li><i class="fa fa-bullhorn"></i></li>
</ul>
</div>
</div>
</form>
</div>
<?php endforeach;?>
Jquery:
$(document).ready(function(){
$(".commentbt").click(function(){
var comment = $(this).closest("div.img-push").find("input[name='comment']").val();
alert(comment);
});
});
All am getting is "Undefined"
I need to get the value of the input field and the textarea. Thanks

Answer 1

I can notice, initially, the next errors on your code:
1) You forgot the close div for <div class="box-footer" style="display:block;">
2) The attribute name of the input element is status_id, not comment
3) The usage of the same ID attribute for multiple elements.
4) On JQuery, I will replace the search of the input by matching by class. Also, I added the search of textarea value too.
So, try next modifications:
PHP
<?php foreach ($statuspost as $post): ?>
<div class="box-footer" style="display:block;">
<form class="com" method="post">
<div class="img-push">
<input type="hidden" class="status_id" name="status_id" value="<?php echo $post['spid'];?>">
<textarea name="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>
<div class="box-footer box-form">
<btn class="btn btn-azure btn-sm pull-right commentbt">Comment</btn>
<ul class="nav nav-pills">
<li><i class="fa fa-bullhorn"></i></li>
</ul>
</div>
</div>
</form>
</div>
<?php endforeach:?>
JQuery
$(document).ready(function()
{
$(".commentbt").click(function()
{
var statusID = $(this).closest("div.img-push").find("input.status_id").val();
alert(statusID);
var comment = $(this).closest("div.img-push").find("textarea.comment").val();
alert(comment);
});
});