JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tree">
</div>
<p id="cl"></p>

CSS

ul#createTree {
    margin:0px;
    padding:0px;
}
ul#createTree li ul {
    margin:0px 0px 0px 20px;
    padding:0px;
}
.drop-active {
    background: #ffff99;
}
.droparea {
    background:#ccc;
    height:70px;
}

JavaScript

var jsonObj = {
    "department": {
        "Title1": [
            {
            "child1": "Green",
            "child2": "Yellow",
            "child3": "Black",
            "child4": "White"}
        ],
        "Title2": [
            {
            "child5": "Violet",
            "child6": "Purple",
            "child7": "Pink",
            "child8": "Orange"}
        ]
    }
}


var addPositions = function() {
    $('.droptrue, .droptrue1').each(function() {
        var position = 0;
        $(this).children().each(function() {
            $(this).data('position', position);
            position++;
        });
    });
};

$(document).ready(function() {
    var treeList = "";
    treeList = "<ul id=\"createTree\" class=\"droptrue1 mt1\">";
    for (var key in jsonObj) {
        //alert("key: " + key + ", value: " + jsonObj[key])
        for (var skey in jsonObj[key]) {
            treeList += ("<li class=\"listTree\" id=" + skey + "><span class=\"Tbltitle\" >" + skey + "</span><ul class=\"droptrue mt\">");
            for (var sskey in jsonObj[key][skey]) {
                for (var ssskey in jsonObj[key][skey][sskey]) {
                    treeList += ("<li class=\"innerList\">" + jsonObj[key][skey][sskey][ssskey] + "</li>");
                }
            }
            treeList += "</ul></li>";
        }
    }
    treeList += "</ul>";
    $('#tree').append(treeList);
    addPositions();
    var origTitle;
    var origColor;
    $(".droptrue").sortable({
        connectWith: "ul.mt",
        dropOnEmpty: true,
        start: function(event, ui) {
            origColor = ui.item.text();
            origTitle = ui.item.parent().siblings('.Tbltitle').text();
        },
        stop: function(event, ui) {
            var order = [];

            ui.item.closest('ul').children('li').each(function() {
                order.push($(this).data('position'));
                var c = $(this).text();
                if (c === origColor) {
                    var z =...