Hiding “write reply” textfield under each comment

I’m working on my school project which is gallery, a clone of flickr and unsplash really. Right now I was working on comments system which works rather well all things considered, but I also want to add replies under those comments and having textfields under each comment seems clunky, so I wrote small jQuery script for it:

This is test file for this part of the code, as I don’t want to ruin something in the main project if something happens. PHP/HTML

<?php 

    require_once 'header.php';

    if(isset($_POST['submit-comment']))
    {
        require_once 'includes/dbh.inc.php';

        $userUid = "Bob";
        $comment = $_POST['comment-input'];
        $pageId = 24;
        $parentId= -1;
        $date = date("Y-m-d H:m:s");

        $sql = "INSERT INTO comments(commentsPageId, commentsParentsId, commentsUseruid, commentsContent, commentsDate) VALUES (?,?,?,?,?);";
        $stmt = mysqli_stmt_init($conn);
        if(!mysqli_stmt_prepare($stmt, $sql))
        {
            echo "OPPSIE!";
        }
        else
        {
            mysqli_stmt_bind_param($stmt, "iissi", $pageId, $parentId, $userUid, $comment, $date);
            mysqli_stmt_execute($stmt);
        }
        mysqli_stmt_close($stmt);
    }


    $sqlSec = "SELECT commentsId, commentsUseruid, commentsContent, commentsDate FROM comments WHERE commentsPageId=24;";
    $stmtSec = mysqli_stmt_init($conn);
    if(!mysqli_stmt_prepare($stmtSec, $sqlSec))
    {
        echo "OPPSIE!";
    }
    else
    {
        mysqli_stmt_execute($stmtSec);
        $result = mysqli_stmt_get_result($stmtSec);
        echo '
                <div class="comments_container">
                    <div class="comment-post">
                        <form action="" method="post">
                            <textarea name="comment-input" cols="100" rows="4" style="resize: none;" placeholder="Write your comment..."></textarea>
                            <button type="submit" name="submit-comment">Post comment</button>
                        </form>
                    </div>
                    <div class="comments">
                ';
        while($row = mysqli_fetch_assoc($result))
        {
            $commentId = $row["commentsId"];
            echo '
            <div class="comment_'.$commentId.'"?
                <div class="header">
                    <p class="name" style="color: black;">'.$row["commentsUseruid"].'</p>
                    <span class="date">'.$row["commentsDate"].'</span>
                </div>
                <p class="content" style="color: black;">'.$row["commentsContent"].'</p>  
                <div class="reply_'.$commentId.'">
                    <form action="" method="post">
                        <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
                        <button type="submit" name="submit-comment">Post comment</button>
                    </form>
                </div>
                <button class="replybtn_'.$commentId.'">Reply</button>
            ';
        }
        echo '</div>';
        echo '</div>';
    }
?>

jQuery

    var id= '<?php echo $commentId; ?>';
    var reply = ".reply_";
    var selectorReply = reply.concat(id);
    var replybtn = ".replybtn_";
    var selectorBtn = replybtn.concat(id);
    $(selectorBtn).click(function(){
        $(selectorReply).toggle()
    });

This kinda works, but while($row = mysqli_fetch_assoc($result)), just spins through all id’s and stops at the last one, so all reply buttons only work on the last comment. Question is how do I apply this script to all comments, instead of only the last so that reply buttons show textfields that are appropriate?

Answer

Instead of writing jquery code for all button individually you can write your event handler like this $("button[class*=replybtn_]").click(function() { so this event will get called when any button has class i.e :replybtn and anything after that word. As you have use _ to attach id as well you can use split("_")[1] this will give you value after _ then using this you can toggle your reply div.

Demo Code:

$("button[class*=replybtn_]").click(function() {
  console.log($(this).attr("class").split("_")[1])
  var ids = $(this).attr("class").split("_")[1];
  $(".reply_" + ids).toggle()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="comments_container">

  <div class="comments">

    <div class="comment_123">
      <div class="header">
        <p class="name" style="color: black;">123</p>
        <span class="date">12/10/2002</span>
      </div>
      <p class="content" style="color: black;">All Goood..</p>
      <div class="reply_123">
        <form action="" method="post">
          <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
          <button type="submit" name="submit-comment">Post comment</button>
        </form>
      </div>
      <button class="replybtn_123">Reply</button>
    </div>
    ----------------------------------------------
    <div class="comment_231">
      <div class="header">
        <p class="name" style="color: black;">231</p>
        <span class="date">12/10/2001</span>
      </div>
      <p class="content" style="color: black;">All Goood or not..</p>
      <div class="reply_231">
        <form action="" method="post">
          <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
          <button type="submit" name="submit-comment">Post comment</button>
        </form>
      </div>
      <button class="replybtn_231">Reply</button>
    </div>
    ---------------------------------------
    <div class="comment_456">
      <div class="header">
        <p class="name" style="color: black;">456</p>
        <span class="date">12/10/1992</span>
      </div>
      <p class="content" style="color: black;">All Aweomese Goood..</p>
      <div class="reply_456">
        <form action="" method="post">
          <textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
          <button type="submit" name="submit-comment">Post comment</button>
        </form>
      </div>
      <button class="replybtn_456">Reply</button>
    </div>
  </div>

Advertisement

Answer