title: How to show/hide a div independently among others with the same class name within a loop
body: <p>i have a while loop within an SQL query that returns all <code>comments</code> for a specific <code>post page</code> , within that same loop i have another query and a while loop that searches for <code>replies</code> to that <code>comment</code> and returns only the first row using <code>LIMIT 1</code>. I did this so only one <code>reply</code> is shown for a <code>comment</code> at first, i added another another query and a loop within the second loop to search for other <code>replies</code> to the <code>comment</code> except this time I'm returning the other rows except the first row using <code>LIMIT 1,18446744073709551615</code>. I've put the result of the last query in a div which is hidden at first, and a trigger <code>view all replies</code> in the first query which comes before the hidden div. </p>
  
  <p>So now i have a trigger <code>view all replies</code> inside the first loop (that contains the comments). using javascript i can show and hide the div when the trigger is clicked. this is a snapshot of what it looks like</p>
  
  <p><strong>First snapshot, div is hidden with only 1 reply being shown.</strong>
  <a href="https://i.stack.imgur.com/Ydudu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ydudu.png" alt="enter image description here"></a></p>
  
  <p><strong>second snapshot, div is visible and text for <code>trigger</code> is changed</strong>
  <a href="https://i.stack.imgur.com/eC3M0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eC3M0.png" alt="enter image description here"></a></p>
  
  <p><strong>My problem:</strong>
  Since I'm using the same class for all hidden <code>div's</code>, the trigger for a particular <code>comment</code> to show/hide its <code>replies</code> works for all <code>comments</code>. so when i click on <code>view all replies</code> for the first comment, the <code>replies</code> for the second,third etc are shown as well. How do rewrite my code to target specific comments to show/hide its replies?</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script language="JavaScript"&gt;
  $(document).ready(function(){
  var showText='View all replies';
  var hideText='Hide';
  // initialise the visibility check
  var is_visible = false;
  // append show/hide links 
  $('.view1').prev().append();
  $(".licom").hide(); 
  $(".view1").click(function(){
  // switch visibility
  is_visible = !is_visible;
  // change the link depending on whether the element is shown or hidden
  $(this).html( (!is_visible) ? showText : hideText);
  $('.licom').toggle(function() {
  $(this).closest('view1').find('.licom').hide();
  return false;
   },
  function() {
  $(this).closest("view1").next(".licom").show();
  return false;
   });  
      });          
  }); 
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>info.php</strong></p>
  
  <pre><code>  &lt;?php
    ...........
     $stmt = $conn-&gt;prepare(
    "SELECT *
    FROM comment
    WHERE post_id = :pid
    ");
  
  $stmt-&gt;bindParam(":pid", $type_id, PDO::PARAM_INT);
  
  
  $stmt-&gt;execute();
  
  while($obj = $stmt-&gt;fetch()){
       $username = $obj['user_name'];
        $comment = $obj['comment'];
        $id1 = $obj['id'];
        $userimage = $obj['user_image'];
        $row ++;
        $likes = $obj['like1'];
        $dislikes = $obj['dislike'];
    echo '&lt;div class="txt"&gt;';
    echo '&lt;div class="comment-container"&gt;';
    echo '&lt;div class="comment-item"&gt;';
      echo '&lt;div class="comment-avatar"&gt;';
        echo '&lt;img src="user/user_images/'.$userimage.'" alt="avatar"&gt;';
      echo '&lt;/div&gt;';
       echo '&lt;div class="comment-post"&gt;';
        echo '&lt;span style="font-weight:bold;"&gt;'.$username.'&amp;nbsp&amp;nbspsaid....  
       &lt;/span&gt;';
        echo '&lt;p style="margin-left:-11px;"&gt;'.$comment.'&lt;/p&gt;';
        echo '&lt;input type="hidden" name="comment_id" value="'.$id.'"&gt;';
        echo '&lt;form action="" method="post" class="ajaxform"   
             enctype="multipart/form-data"&gt;';
  
         echo '&lt;input type="hidden" name="lkcv[]" value="'.$id.'"&gt;';
         echo '&lt;input type="hidden" name="pid" value="'.$type_id.'"&gt;';
         echo '&lt;input type="hidden" name="stk" value="'.$likes.'"&gt;';
        echo '&lt;input type="image" src="images/like.png" id="lksub" width="15"
            value="som" height="15" style="float:right;position:relative;margin-
               right:290px;"/&gt;&lt;div class="ld"&gt;'.$likes.'&lt;/div&gt;';
  
        echo '&lt;/form&gt;';
        echo '&lt;form action="" method="post"    enctype="multipart/form-data"&gt;';
         echo '&lt;input type="hidden" name="lkd_id" value="'.$id.'"&gt;';
          echo '&lt;input type="hidden" name="dislike" value=""&gt;';
          echo ' &lt;input type= "image" id="submit" src="images/dislike.png" 
                width="15" height="15" style="float:right;position:relative;
                margin-top:-14px;margin-right:230px;"/&gt;
               &lt;div class="ldks"&gt;'.$dislikes.'&lt;/div&gt;';
               echo '&lt;/form&gt;';
               //trigger to hide/show replies
               echo '&lt;span class="view1" style="float:right;margin-top:-15px;"&gt;View all replies&lt;/span&gt;';
               //
              echo '&lt;span class="SendCopy"&gt;Reply&lt;/span&gt; ';
              echo '&lt;div class="users"&gt;';
             echo '&lt;form action="" method="post"    enctype="multipart/form-
                    data"&gt;';
             echo '&lt;textarea rows="4"  name="replycomment" style="float:right;
                    resize: none;margin-top:5px;" cols="50" &gt;';
              echo '&lt;/textarea&gt;';
           echo '&lt;input type="hidden" name="comment_id" value="'.$id.'"&gt;';
           echo '&lt;input type="submit" name="reply" id="submit" class="post-
                   button" value="Send" /&gt;';
           echo '&lt;/form&gt;';
  
            echo '&lt;/div&gt;';
  
           echo '&lt;/div&gt;';
  
            echo '&lt;/div&gt;';  
  
           echo '&lt;/div&gt;'; 
          echo '&lt;/div&gt;';
  
   //Relpy to comment, show only the first row
   $rep = $conn-&gt;prepare("SELECT  * FROM reply WHERE comment_id = :comid LIMIT 1");
  $rep-&gt;bindParam(":pid", $id1, PDO::PARAM_INT);
  
  
  $rep-&gt;execute();
  
  while($obj = $rep-&gt;fetch()){
      //...........same output as first without the view all replies trigger......
  
  //Relpy to comment, show from 2-
  $rep = $conn-&gt;prepare("SELECT  * FROM reply WHERE comment_id = :comid LIMIT 1,18446744073709551615");
  $rep-&gt;bindParam(":pid", $id1, PDO::PARAM_INT);
  
  
  $rep-&gt;execute();
  
  while($obj = $rep-&gt;fetch()){
  //div to show/hide
  echo '&lt;div class="licom"&gt;';
   //...........same output as first without the view all replies trigger......
  
  }
    }
       }
   ?&gt;
  </code></pre>