onclick in javascript with while loop from php

Question

I'm desperately trying to add reply fields to a comment section for a couple of days now - basically I want a reply field(div) to appear as soon as you click a certain button. I thought using an onclick event handler was the way to go.

We are already in an php echo, so I thought it would be easy to just add the row-id (cid) to the actual div and button id - turns out its not working..

Added myFunction() to the button

Added "myDIV" to check whether the code would work with this simply div - it does

Added ID to print out the name of the div and button while "cid" is added to get a better overview in the browser (cid in the brwoser were as expected) - lastly I got rid of the code and just alerted the cid and was very surprised that it was a number I didn't expect.. it was the last cid from the database

  if($usermatchcom1 = $usermatchcom->fetch_assoc()){

    echo "<div class='comment_box'><p>";
    echo $usermatchcom1['uidusers']."<br>";
    echo $comments1['date']."<br>";
    echo nl2br($comments1['message']);
    echo "</p>";

    if(isset($_SESSION['userid'])){
      if($_SESSION['userid'] == $usermatchcom1['idusers']){
        echo "<form class='delete_form' method='POST' action='".deletecomments($conn)."'>
        <input type='hidden' name='cid' value='".$comments1['cid']."'>
        <input type='hidden' name='sid' value='$sid'>
        <input type='hidden' name='sname' value='$sname'>
        <button type='submit' name='deletesubmit'>Delete</button>
        </form>
        <form class='edit_form' method='POST' action='editcomment.php'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='uidname' value='".$comments1['uidusers']."'>              
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <button>Edit</button>
        </form>";
      }else{
          echo "<form class='reply_form' method='POST' action='replycomment.php'>

          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <button>Reply</button>
          </form>";
      }
    }else{
      echo "<p class='replymessage'>You need to be logged in to reply</p>";
    }

    echo "</div>";

      }

      foreach($replymatch as $replymatch1){

        echo "<div class='reply_box'><p>";
        echo $replymatch1['uidusers']."<br>";
        echo $replymatch1['date']."<br>";
        echo nl2br($replymatch1['message']);
        echo "</p><br>";



        if(isset($_SESSION['userid'])){
          if($_SESSION['userid'] == $replymatch1['uidcomments']){
        echo "<form class='delete_form' method='POST' action='".deletecomments($conn)."'>
        <input type='hidden' name='cid' value='".$comments1['cid']."'>
        <input type='hidden' name='sid' value='$sid'>
        <input type='hidden' name='sname' value='$sname'>
        <button type='submit' name='deletesubmit'>Delete</button>
        </form>
        <form class='edit_form' method='POST' action='editcomment.php'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <button>Edit</button>
        </form>";
      }else{
          echo "<form class='reply_form' method='POST' action='replycomment.php'>

          <input type='hidden' name='uidcomments' value='".$comments1['uidcomments']."'>
          <input type='hidden' name='date' value='".$comments1['date']."'>
          <input type='hidden' name='cid' value='".$comments1['cid']."'>
          <input type='hidden' name='sid' value='$sid'>
          <input type='hidden' name='sname' value='$sname'>
          <input type='hidden' name='message' value='".$comments1['message']."'>
          <button>Reply</button>
          </form>
          <button id='test_".$replymatch1['cid']."' onclick='myFunction()'>Test</button>";
      }
    }else{
      echo "<p class='replymessage'>You need to be logged in to reply</p>";
    }

    echo "</div>";

    echo "

    <style>
    .replytest_".$replymatch1['cid']."{
      width: 400px;
      margin-left: 50px;
      max-height: 200px;
      overflow: hidden;
      background: #fff;
      color: black;  
    }
    .replytest_".$replymatch1['cid'].".open{
      max-height: 80px;
      color: red;

    }

    #myDIV {
      width: 400px;
      margin-left: 50px;
      max-height: 200px;
      overflow: hidden;
      background: #fff;
      color: black;  
    }

    </style>";

    echo "

<div id='myDIV'>
This is my DIV element.
</div>
<br>

<p id='testtext'>Divs name is replytest_".$replymatch1['cid']." and buttons name is showmore_".$replymatch1['cid']."</p><br>

<p id='showme'>Test</p>

</div>       
<script>
  function myFunction() {
  var x = document.getElementById('replytest_".$replymatch1['cid']."');
    if (x.style.display === 'none') {
      x.style.display = 'block';
    } else {
     x.style.display = 'none';
    }
   }

";

I "simply" want a textarea to appear below the comment I clicked "reply" on - as of my understanding I have to do this in a php while loop, since I receive the comments from the database

Any help would be appreciated

Thx guys

Answer 1

Here is your required solution with jquery. Now you can use php also here for dynamic data.

$(document).ready(function(){
  $("button").click(function(){
    $("#replyField").fadeToggle();
  });
});

button{
 display:block;
 }
 
#replyField {
 
 display:none
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Reply</button>
<textarea rows="4" cols="50" id="replyField">
 
</textarea>