How to Display and Hide reply form only when a reply button is clicked

Question

I am trying to add reply comments to my comment system in a Laravel 8 project. I have written a script to show the reply form when the reply button is clicked but the form is always in displayed by default. However, when the reply button is clicked, the form hides and shows on the second click. I seem not to get what I am not getting right. Please, I need your assistant in this regard. This is my code:

//The form    
<div class="card-body">
     @if ($PostDetails->comment)
         @foreach($PostDetails->comment as $comment)
             <blockquote class="blockquote">
             <p class="mb-0">{{ $comment->comment }}</p>
             <footer class="blockquote-footer">{{ $comment->user->name }}</footer>
             </blockquote>
             {{-- Reply Comment Section --}}
             <button id="reply-button" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" class="border-0 bg-transparent">Reply</button>
             <div class="row flex-row d-flex">
                  <form action="" method="post">
                       <div class="col-lg-12">
                            <textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10" name="replyMessage"></textarea>
                       </div>
                  </form>
              </div>
              <hr>
         @endforeach
       @endif
</div>

//The script is:
<script type="text/javascript">
    function showReplyForm(commentId){
        var x = document.getElementById(`reply-form-${commentId}`);
        if (x.style.display === "none") {
            x.style.display = "block";
        }else{
            x.style.display = "none";
        }
    }
</script>

Answer 1

Add the style="display:none;" to make it hidden at start.

<div class="card-body">
     @if ($PostDetails->comment)
         @foreach($PostDetails->comment as $comment)
             <blockquote class="blockquote">
             <p class="mb-0">{{ $comment->comment }}</p>
             <footer class="blockquote-footer">{{ $comment->user->name }}</footer>
             </blockquote>
             {{-- Reply Comment Section --}}
             <button id="reply-button" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" class="border-0 bg-transparent">Reply</button>
             
             <div class="row flex-row d-flex" style="display:none">
                  <form action="" method="post">
                       <div class="col-lg-12">
                            <textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10" name="replyMessage"></textarea>
                       </div>
                  </form>
              </div>
              <hr>
         @endforeach
       @endif
</div>

//The script is:
<script type="text/javascript">
    function showReplyForm(commentId){
        var x = document.getElementById(`reply-form-${commentId}`);

        if (x.style.display === "none") {
            x.style.display = "block";
        }else{
            x.style.display = "none";
        }
        
    }
</script>

Answer 2

Change the id attribute for your buttons to class="reply-button" and add the style="display:none" to your textareas . Then you can simplify your JavaScript part to

document.querySelectorAll(".reply-button").forEach(btn=>btn.onclick=ev=>{      
  const x=ev.target.nextElementSibling.querySelector("textarea");
  x.style.display = x.style.display ==="none"?"":"none";
});

Then there is no need to assign id s to the individual textareas anymore.