JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="comments-list"> 
           <li class="comment" id="'.$comComment->CommentID.'">
                <div>Comment Content</div>
                <a class="comment-reply-link" onclick="javascript:replyForm(this)">reply</a>
           <ul>
              <li>
                <div>Comment Content</div>
                <a class="comment-reply-link" onclick="javascript:replyForm(this)">reply</a>
              </li>
           </ul>
            </li>
        <li>
            <div>Comment Content</div>
            <a class="comment-reply-link" onclick="javascript:replyForm(this)">reply</a>
        </li>
    </ul>
<div id="comment-reply">And Form HEre</div>

JavaScript

//$('a.comment-reply-link').click(function(){
  
  //  $(this).after($('#comment-reply'));
    
//});

function replyForm(me){
    var commentForm = document.getElementById('comment-reply')
    insertAfter(commentForm, me);
       
}

function insertAfter(newElement,targetElement) {
//target is what you want it to go after. Look for this elements parent.
var parent = targetElement.parentNode;
 
//if the parents lastchild is the targetElement...
if(parent.lastchild == targetElement) {
//add the newElement after the target element.
parent.appendChild(newElement);
} else {
// else the target has siblings, insert the new element between the target and it's next sibling.
parent.insertBefore(newElement, targetElement.nextSibling);
}
}