如何创建一个回复按钮，每次单击一个按钮时显示

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.