JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/stylesheets/jquery.treetable.css">
<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/stylesheets/jquery.treetable.theme.default.css">
<script src="http://ludo.cubicphuse.nl/jquery-treetable/javascripts/src/jquery.treetable.js"></script>
New Element
<input type="text" value="" id="new-folder" />
<button id="add-folder">Add Folder</button>
<table id="yourNormalLists" class="">
    <tbody>
        <!-- FOLDER WITH LIST ITEMS -->
        <tr data-tt-id='13-abc' data-folder-id="13">
            <td><span class='folder'>Test a folder HFA1</span>

            </td>
        </tr>
        <tr id="12" data-tt-id='13-12' data-tt-parent-id='13-abc'>
            <td>	<span class="list">
						<span class="type defaultStatic "><a href="javascript:void(0)" data-relation="defaultStatic" class="listtype"></a></span>
	<a href="http://example.com//12">discovery test: gaelic, story</a>	
                </span>
            </td>
        </tr>
        <tr id="4002" data-tt-id='13-4002' data-tt-parent-id='13-abc'>
            <td>	<span class="list">
						<span class="type defaultStatic "><a href="javascript:void(0)" data-relation="defaultStatic" class="listtype"></a></span>
	<a href="http://example.com//4002">hugh's list</a>	
                </span>
            </td>
        </tr>
        <tr id="5390" data-tt-id='13-5390' data-tt-parent-id='13-abc'>
            <td>	<span class="list">
						<span class="type listfromsegment"><a href="javascript:void(0)" data-relation="listfromsegment" class="listtype"></a></span>
	<a href="http://example.com//5390">HFA segment soc media test</a>	
                </span>
            </td>
        </tr>
        <tr data-tt-id='12' data-folder-id="12">
            <td><span class='folder'>Dave test</span>

            </td>
        </tr>
        <tr id="19" data-tt-id='12-19' data-tt-parent-id='12'>
            <td>	<span class="list">
						<span class="type...

JavaScript

$(function () {


    //add new folder

    $("#add-folder").click(function () {

        var newfolder = $("#new-folder").val();

        if (newfolder) {
            var rand = Math.floor((Math.random() * 9999) + 1) +'abc';
            var newRow = '<tr data-tt-id="' + rand + '" data-folder-id="' + rand + '"><td colspan="4"><span class="folder">"' + newfolder + '"</span></td></tr>';
            $("#yourNormalLists").append(newRow).find('#yourNormalLists').treetable({
        expandable: true
    }).draggable();
            
            

            
            
        } else {
            alert("enter folder name");
        }

    });




    // treetable config

    $("#yourNormalLists").treetable({
        expandable: true
    });
    // Drag & Drop Example Code
    $("#yourNormalLists .list").draggable({
        helper: "clone",
        opacity: '.75',
        refreshPositions: true, // Performance?
        revert: "invalid",
        revertDuration: 300,
        scroll: true
    });

    $("#yourNormalLists .folder,#yourNormalLists .default").each(function () {
        $(this).parents("#yourNormalLists tr").droppable({
            accept: ".list, .folder",
            drop: function (e, ui) {

                var droppedEl = ui.draggable.parents("tr");
                $("#yourNormalLists").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));

                var list_id = droppedEl.attr("id");
                var folder_id = $(this).data("ttId");
                if ((typeof list_id !== "undefined") && (typeof folder_id !== "undefined")) {
                    $.post(
                        "http://example.com/lists/dragdrop", //Ajax file
                    {
                        'list_id': list_id,
                            'folder_id': folder_id
                    }, // create an object will all values
                    function (data) {
                        console.log(data);
                    },
                       ...