Full Front End, AJAX comment system and comment reply script

Question

I am write a dynamic comment system, without page refreshing.

The problem is, how do I move the "form" element to add sub comments? Like the comment-reply.min.js

My workspace:

<script type="text/x-tmpl" id="intoTemplate">       
{% for (var i=0; i<o.result.length; i++) { %}
<div id="post-{%=o.result[i].post.id%}">
    <div><a href="<?php echo homeurl(); ?>/{%=o.result[i].post.type%}/{%=o.result[i].post.slug%}/">{%=o.result[i].post.title%}</a></div>
    <div class="content">{%=o.result[i].post.content%}</div>
    <div>{%=moment.unix(o.result[i].post.time).locale('tr').format("DD MMMM YYYY, ddd kk:mm:ss")%}</div>

<h3>Comments</h3>
    {% if(o.result[i].post.comment.total.found>0){
         for (var d=0; d<o.result[i].post.comment.result.length; d++) { %}

        <div id="comment-{%=o.result[i].post.comment.result[d].id%}">
            <div class="content auto-hashtag auto-usertag">
                {%=o.result[i].post.comment.result[d].content%}
                <button>Reply</button>
            </div>
        </div>

        {% }
    } else { %}
        <div>no comments</div>
    {% } %}

    <div id="comments-{%=o.result[i].post.id%}" data-nonce="{%=o.result[i].post.nonce%}">
        <form id="commentForm-{%=o.result[i].post.id%}" class="comment-form">
            <?php if($currentUserId!=0&&is_numeric($currentUserId)): ?>
                 <input type="hidden" name="user_id" value="<?php echo $currentUserId; ?>" />
            <?php else: ?>
                 <input type="text" name="guest" placeholder="Your Name" />
            <?php endif; ?>
                 <input type="hidden" name="nonce" value="{%=o.result[i].post.nonce%}" />
                 <input type="hidden" name="id" value="{%=o.result[i].post.id%}" />
                 <input type="hidden" name="parent" value="0" />
                 <textarea name="content" placeholder="Write..."></textarea>
        </form>
    </div>
</div>
{% } %}
</ul>
</script>

After the jSON parse rendering, my pure html (SIMILAR):

<h3>Comments</h3>

<div id="comments-123">
   <div id="comment-588">
         A sample comment
         <button>Reply</button>
   </div>
   <div id="comment-589">
         A sample comment
         <button>Reply</button>
   </div>
   <form id="commentForm-123">
     <input type="hidden" name="nonce" value="12hf223nf" />
     <input type="hidden" name="id" value="123" />
     <input type="hidden" name="parent" value="0" /> <!-- parent = 0 : not a child comment -->
     <textarea name="content" placeholder="Write..."></textarea>
   </form>
</div>

How to when click any reply button, <form id="commentForm-*"> move to clicked button div inside. Just like the example below.

<h3>Comments</h3>

<div id="comments-123">
   <div id="comment-588">
         A sample comment
         <button>Reply</button>
   </div>
   <div id="comment-589">
         A sample comment
         <button>Reply</button>
         <form id="commentForm-123">
             <input type="hidden" name="nonce" value="12hf223nf" />
             <input type="hidden" name="id" value="123" />
             <input type="hidden" name="parent" value="589" /> <!-- parent = 589 : child from 589 -->
             <textarea name="content" placeholder="Write..."></textarea>
         </form>
   </div>
</div>

After the moved, parent id set the input value: <input type="hidden" name="parent" value="589" /> <!-- parent = 589 : child from 589 -->

Now all these things are working on the backend and frontend. But the only problem I have had is that I did not know how to carry the "<form>" element.

Note: This is like a index.php, archive.php Custom Post Query page.

Answer 1

<script>
var addComment = {
    settings: function( parentId, postId ) {        

        var 
            t                   = $(this),
            commentDivName      = $('#comment-'+parentId),
            formDivName         = $('#commentForm-'+postId),
            formReplyDivName    = $('#commentReplyForm-'+parentId),
            postDivName         = $('#post-'+postId),
            theform             = formDivName.find('form.comment-form');

            if( !t.length || !commentDivName.length || !formDivName.length || !postDivName.length ) {
                return;
            }

            if(!theform.length){

                $(postDivName).find('[id^=commentReplyForm-]').each(function(){
                    if($(this).find('form.comment-form').length){
                        formDivName = $('#'+$(this).attr('id'));
                    }
                });

                theform         = formDivName.find('form.comment-form');

            }

            theform.find('input[name=parent]').val(parentId);
            theform.appendTo(formReplyDivName);

            var cancel          = formReplyDivName.find('.cancel')
            cancel.show();

    }
};
</script>