Am working on a blog site. In the blog details, I have a comments section where each comment can be replied to. This is how it looks: The outer one is the comment and inner one is the reply.

I have used Javascript so when a user clicks on "Reply", the reply form appears below the comment like this:

My problem is, whichever comment is clicked to reply to, the reply form always displays on the first comment. How can I make it appear on the exact clicked comment? Am using Django, and HTML, CSS & JS for frontend.

This is my Script:

    function classingFunction() {
      var element = document.getElementById("my-reply");
      if (element.classList.contains('my_reply')) {
        element.classList.remove("my_reply");
      }
      else if (element.classList.contains('my_reply') == false){
        element.classList.add("my_reply");
      }
    }

The my_reply class has {display:none;} for the form.