Creating a form for each comment jquey and djang

I want for my website in the comments section, when the user clicks on the answer, an input form will be added to the bottom of the same comment, and if there is another form for other comments, they will be hidden.

this is my code html and django:

<li class="comment" style="margin-right: 100px;">
    <div class="comment-body">
        <div class="single-comment">
            <div class="comment-img" style="margin-left: 50px;">
                {% bs_icon 'person' size='65' %}
            </div>
            <div class="comment-inner">
                <h6 class="commenter">
                    <a class="hover-flip-item-wrapper" href="#">
                        <span class="hover-flip-item">
                            <span data-text="{{ reply.user_name }}">{{ comment.user_name }}</span>
                        </span>
                    </a>
                </h6>
                <div class="comment-meta">
                    <div class="time-spent">آبان 23, 1401 در 12:23 بعد از ظهر</div>
                    <div class="reply-edit">
                        <div class="reply">
                            <a class="comment-reply-link hover-flip-item-wrapper"
                                href="">
                                <span class="hover-flip-item">
                                    <span data-text="Reply" id="reply-comment">پاسخ</span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="comment-text">
                    <p>{{ comment.text_comment}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="comment-respond reply-form" id="{{ comment.id }}"  style="margin-right: 100px;display:none;" >
        <h4 class="title">پاسخ شما</h4>
        <form action="#">
            <p class="comment-notes"><span id="email-notes">آدرس ایمیل شما منتشر نخواهد
                    شد.</span></p>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label>پاسخ شما</label>
                        <textarea name="message" placeholder="بنویسید ..."></textarea>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="form-group">
                        <label>نام <span>*</span></label>
                        <input id="name" type="text">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="form-group">
                        <label>ایمیل <span>*</span> </label>
                        <input id="email" type="email">
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-submit">
                        <button name="submit" type="submit" id="submit" href="#"
                            class="axil-btn btn-bg-primary w-auto">ارسال پاسخ</button>
                    </div>
                </div>
            </div>
        </form>
    </div>    

this is code jquery:

 <script>
        $('.hover-flip-item #reply-comment').click(function(event){
            event.preventDefault();
            $('.reply-form').css("display", "block");
        })
        
   </script>

and this is risult:

enter image description here

I would be very grateful if someone answers.

Back to Top