JSFiddle - React, Tailwind, and code Playground

HTML

<ul> 
<li class="tree-l2"><a class="reference internal" href="#">One</a></li> 
<li class="tree-l2"><a class="reference internal" href="#">Two</a></li> 
<li class="tree-l2"><a class="reference internal" href="#">There</a></li>
<li class="tree-l2-new">
    <div class="new-tree-node-l2">New</div>
</li> 
</ul>

JavaScript

$(document).ready(function() {

    $('.new-tree-node-l2').click(function(event) {
        $(this).parent(':last').after('<li class="tree-l2"><input name="" class="new-tree-node-title"><span class="new-tree-node-close">[Close]</span></li>');
        $(this).remove();    
    });

    $('.new-tree-node-close').click(function(event) {
        alert("Do Something...");
    });

});