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.