JQuery 'Reply' hyperlink in PHP while loop

Question

I have a simple PHP while loop which executes a list of tabular comments/posts from the SQL database. Each post has a reply hyperlink that that will open a textarea (form) below the post which will allow the user to reply to that specific post. It works fine for one post, but when there are multiple posts the jQuery opens all of the textareas for each post. I assume that this is an issue with me calling identical classes using jQuery. But I am not sure how to deal with it. What I would like to achieve is allowing the user to click on a reply hyperlink within a specific post and only that textarea will appear underneath and not all of them at the same time.

Here is the PHP code to generate the list of posts with the reply feature.

<?php>

echo "<table width=\"100%\" border=\"0\" cellspacing=\"10\">";

while ($row2 = mysql_fetch_assoc($res)) 
{

echo "
   <tr>
   <td>
      <span class=\"anonname\">Anon" . $row2['uid'] . " </span> 
      <span class=\"smalltext\"> says:</span>
   </td>
   </tr>
   <tr>
   <td>
      <span class=\"messagetext\">" . $row2['msg'] . "</span></td>
   </tr>
   <tr>
   <td>
       <div class=\"replystyle\"><span class=\"replytext\"><a href=\"#\"  
       class=\"replybtn\">Reply</a> &#8901; <a href=\"#\">Like</a> </span> <span              
       class=\"replytext\" style=\"float:right;\"><span class=\"timetext\">" .         
       $row2['timestamp'] . "</span><a href=\"report.html\">Report</a></span></div>
   </td>
   </tr>
   <tr>
   <td>
       <div id=\"replymsgbox\">
       <form id=\"messaging\" action=\"\" method=\"post\" accept-charset=\"UTF-8\"> 
       <div class=\"tarea\">
       <textarea name=\"message\" rows=\"2\" class=\"txtbx\"></textarea>
       </div>
   <span style=\"float:right;\"><input name=\"submit\" class=\"signupbtn\"          
       type=\"submit\" value=\"share\" /></span><br/><br/>
       </form>
   </div>
  </td>
  </tr>";
}
       echo "</table>";
}
?>

Here is the jQuery

<script language="javascript" type="text/javascript"> 
  $(document).ready(function(){
            $('.replymsgbox').hide();
    $('.replybtn').click(function(){
    $('.replymsgbox').slideToggle('fast');
       });
       });
</script>     

Any help would be appreciated.

Answer 1

With $('.replymsgbox') selector, you are getting all the element having such class.

To get just the one related to the button, use:

$('.replybtn').click(function(){
    $('.replymsgbox', $(this).parent().parent().next()).slideToggle('fast');
});

You are narrowing research of a .replymsgbox element inside next <tr> this way.

Answer 2

(This isn't an answer, just an observation; comments don't allow such formatting)

This is what I wrote about in my comment to your question:

<table width="100%" border="0" cellspacing="10">
<?php
while ($row2 = mysql_fetch_assoc($res)) {
?>    
   <tr>
   <td>
      <span class="anonname">Anon<?php echo $row2['uid'];?></span> 
      <span class="smalltext"> says:</span>
   </td>
   </tr>
   <tr>
   <td>
      <span class="messagetext"><?php echo $row2['msg']; ?></span></td>
   </tr>
   <tr>
   <td>
       <div class="replystyle"><span class="replytext"><a href="#"  
       class="replybtn">Reply</a> &#8901; <a href="#">Like</a> </span> 
       <span class="replytext" style="float:right;"><span 
       class="timetext"><?php echo $row2['timestamp']; ?></span><a 
       href="report.html">Report</a></span></div>
   </td>
   </tr>
   <tr>
   <td>
       <div id="replymsgbox">
       <form id="messaging" action="" method="post" accept-charset="UTF-8"> 
       <div class="tarea">
         <textarea name="message"rows="2" class="txtbx"></textarea>
       </div>
       <span style="float:right;"><input name="submit" class="signupbtn"          
       type="submit" value="share" /></span><br/><br/>
       </form>
   </div>
  </td>
  </tr>
<?php } ?>
</table>

See how that cleans up much better? Now if you want to make changes to your HTML, you don't have to through all the complex escaping machinations.