How to create a reply button that displays for each button clicked one at a time

Question

I'm creating a comment and reply system, but I can't get the reply button to display the input field for only the comment.

When the any reply button is clicked, all the input fields displays instead of just the one clicked

This is my javascript:

function reply() {

    var doc;
    doc=document.getElementsByClassName("sho") ; 
    
    for (var i = 0 ; i < doc.length; i++){
        doc[i].style.display="block ";
    
    }
} 

Answer 1

 $('.btn-reply').on("click", function () { var parent_dom = $(this).parent(); var _input_child_dom = $(parent_dom).children("input"); var find_allInput = $('.reply-container').find("input"); if(find_allInput.length > 0 ){ for (var i = 0; i < find_allInput.length; i++) { $(find_allInput[i]).css("display", "none"); } } $(_input_child_dom).css("display", "block"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="reply-container"> <div class="reply"> <p>First reply</p> <button class="btn btn-primary btn-reply">reply</button> <input type="text" class="InputReply" style="display: none;"> </div> <br> <div class="reply"> <p>Second reply</p> <button class="btn btn-primary btn-reply">reply</button> <input type="text" class="InputReply" style="display: none;"> </div> <br> <div class="reply"> <p>Third reply</p> <button class="btn btn-primary btn-reply">reply</button> <input type="text" class="InputReply" style="display: none;"> </div> </div>

Note: This is the idea of how you can achieve your requirement.