JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<div id="all_comments">
<span class="subcomment">reply</span>
<span>...</span>
    <div id="formsub_0"  class="formsub" style="display:none;">
                <form id="subform" method="POST">
                    <textarea style="height:50px; width:400px; " name="subcomment" id="subcomment"></textarea>
                     <input type="submit" name="reply_com" value="Reply">&nbsp;&nbsp;<input type="button" name="cancel" value="Close">
                </form>

                </div>
</div>

JavaScript

$(document).ready(function(){
$(".subcomment").click(function(){
                       var element = $(this);
                       var i = element.attr("id");


                       $(this).next().next($("div#form"+ i)).addClass("reply_m");
                       var allcomment = $("#all_comments");

                        var getclas = $(this).next().next($("div#form"+ i)).attr("class");


                        var count =  allcomment.find("div.reply_m").length;

                        if (count == 0 || count == 1){
                            
                            $(this).next().next($("div.reply_m ")).slideDown("fast");
                        }
                        if (count > 1)
                        {
                          allcomment.find("div.formsub").removeClass("reply_m").slideUp("fast");
                          allcomment.find("ul").removeAttr("class");
                          $(this).next().next($("div#form"+ i)).addClass("reply_m");
                          $(this).next().next($("div.reply_m")).slideDown("fast");
                        }
                            $(this).next().next($("div.reply_m #subform")).submit(function(){
                             var data = $("#subform",this).serialize();
                             alert(data);
return false;
});
    
});

});