JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div class="comments">
    <div class="comment-form">
        <a href="#" class="close-form">Close</a>
        <form action="" class="create-comment">
            <input type="hidden" name="comment_id" value="">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <button>Submit</button>
        </form>
    </div>
    <div class="comment-list">
        <div class="single-comment" data-id="1">
            <span class="username">Petko</span>
            <blockquote>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus labore ratione rerum, ea, quasi odio, fugiat dolores aut quas doloribus quo sit eaque tenetur deleniti? Dolorum doloribus ab voluptas sunt.
            </blockquote>
            <a href="#" class="comment-reply">Reply</a>
            <div class="comment-reply-form">

            </div>
        </div>
        <div class="single-comment" data-id="2">
            <span class="username">Petko</span>
            <blockquote>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus labore ratione rerum, ea, quasi odio, fugiat dolores aut quas doloribus quo sit eaque tenetur deleniti? Dolorum doloribus ab voluptas sunt.
            </blockquote>
            <a href="#" class="comment-reply">Reply</a>
            <div class="comment-reply-form">

            </div>
        </div>
        <div class="single-comment" data-id="3">
            <span class="username">Petko</span>
            <blockquote>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus labore ratione rerum, ea, quasi odio, fugiat dolores aut quas doloribus quo sit eaque tenetur deleniti? Dolorum doloribus ab voluptas sunt.
            </blockquote>
            <a href="#" class="comment-reply">Reply</a>
            <div class="comment-reply-form">

            </div>
        </div>
    </div>
</div>

CSS

.close-form {
  display: none;
}
.comment-reply-form .close-form {
  display: block;
}

JavaScript

$('.comment-reply').on('click', function(e) {
	e.preventDefault();
	$(this).next().html('');
	var comment_id = $(this).closest('.single-comment').data('id');
	$('input[name="comment_id"]').val(comment_id);
	var form = $('.comment-form').first().clone();
	$(this).next().html(form);
});

$(document).on('click', '.close-form', function(e) { 
	e.preventDefault();
	$('input[name="comment_id"]').val(''); 
	$(this).closest('.single-comment').find('.comment-reply-form').html('');
});