Reply Comment System - php

Question

Hello Everyone I am new to php and doing a project. My Problem is I am working on review page and fetching data from 3 tables using while loop.
The problem is I want to create comment reply system. I am using text area for comment in loop and showing the text area on button click but when I am click on button, each text area gets visible which I don't want. I think problem is due to while loop.
Please suggest me a proper idea.
Thank u in advance.
Php part:
<div class="feedback-list">
<!--img class="doc-img"src="img/doc-img.png" alt="tempimg" height="100" width="100"/>
<div class="feedback-header"-->
<?php
while($row1=mysql_fetch_array($result1))
{
$username1=$row1['username'];
$rtitle=$row1['reviewtitle'];
$rexperience=$row1['experience'];
echo '<div class="feedback"><img class="doc-img" src="img/doc-img.png" alt="temp img" height="100" width="100"/><div class="feedback-header">Rivew by '.$username1.'
<span class="stars" id="star1"><img src="img/stars.png"/></span>
</div>
<p> '.$rtitle.'</p><br/>
<p> '.$rexperience.'</p>
<form action="submitcomment.php" method="post" name="frms">
<!--button type="submit" onclick="showCommentBox()">Reply</button><br/-->
<input type="button" value="Reply" onclick="showCommentBox('.$row1['reviewid'].')"><br/>
<div class="hidden" id="comment">
<!--p>Comments and suggestions:<br><textarea name="comments" rows="3" cols="30" ></textarea><br><br>
<input type="submit" name="sub" value="Confirm"></p-->
</div>
</form>
<span class="read-more">Read More</span>
<span class="added-by">added on 25 March</span>
</div>';}?>
Script:
<script type="text/javascript">
function showCommentBox(x){
//alert(x);
var div=document.getElementById('comment');
div.className='visible';
document.getElementById("comment").innerHTML =
'<br/><textarea maxlength="5000" cols="30" rows="3" name="comments"></textarea>' +
'<input type="submit" name="sub" value="Confirm">';
}
</script>

Answer 1

ALL of your comment boxes have the same DOM ID:
<div class="hidden" id="comment">
^^^^^^^^^^^^
This is not permitted. An ID must be unique across the entire page. Because of this, getElementById() will only ever return ONE element which matches, which is generally the FIRST matching element it finds - there is no point in continuing to search for something of which only one can exist, right?
You probably want something more like
<div class="hidden" id="comment{$id}">
<button onclick="showComment($id);" >
function showComment(id) {
foo = document.getElementById('comment' + id);
}