php foreach -> Get corresponding data with js - php

Question

I have a blog and get data from some SQL-database.
I have a problem to get correct data from a foreach loop and i don't know why. I will try to explain.
For each image there is a textarea where users can put in a comment. For each comment i have to send the corresponding id (ajax) to add to the database.
foreach($db->query("SELECT id, image FROM news") as $row)
{
<a href='images/news/{$row['image']}'><img src='images/news/{$row['image']}'/></a>";
<div class="save_comment">
<table width="400" border="0" cellspacing="1" cellpadding="2">
<tr>
<td>
<input type="text" class="_comment_id" name="id" value="<?php print_r($row['id'] );?>" />
Comment:
<textarea id="_comment_text" class="comment_area" name="comment_area" maxlength="400" cols="80" rows="8" ></textarea>
</td>
</tr>
<tr>
<td>
<a class="post_comment" href=".popupContainer">Post Comment</a>
</td>
</tr>
</table>
</div>
}
On click on "Post Comment" following js-script will be initialised....
<script type="text/javascript">
jQuery(document).ready(function() {
$(".post_comment").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
</script>
....and a popup Container (div with class .popupContainer) is shown, where users can finally submit their comment.
<div class="popupContainer" style="display:none;">
Your Name: <input type="text" class="_user_name" />
Email:<input type="text" class="_comment_email" />
<input type='button' class='_submit_comment' value='Speichern' >
</div>
By submitting this comment, following script is initialised and data will be sent by ajax.
<script type="text/javascript">
$("._submit_comment").click(function(){
var parentObj = $(this).closest('.save_comment');
var _comment_id = parentObj.find('._comment_id').val(); -> I don't get the correct id
So here begins the problem. I only get the first id from the foreach-loop, but i need to get for every comment the corresponding id. Can anybody help with this problem?
Thank you
Misch

Answer 1

This part is wrong IMHO :
$(this).closest('.save_comment');
You should set a JS variable when you click on "Post Comment" with the id that you can store in the link like :
<a class="post_comment" href=".popupContainer" data-idcomment="<?php print($row['id'] );?>">Post Comment</a>
And
var _comment_id = null;
jQuery('.tabs .tab-links a').on('click', function(e) {
_comment_id = jQuery(this).data('idcomment');
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
Then you can use _comment_id for you ajax call