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=\"asdf\"><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();
  $(".droptrue").sortable({
    connectWith: "ul.mt",
    dropOnEmpty: true,
    stop: function(event, ui) {
      var order = [];
      ui.item.closest('ul').children('li').each(function() {
        order.push($(this).data('position'));
        var c = $(this).text();
        var z = $(this).parent().siblings('.Tbltitle').text();
        //alert(z);
        $("#cl").append(z + "_" + c + "<br />");
      });
    }
  });

  $("ul.droptrue1").sortable({
    connectWith: "ul.mt1",
    dropOnEmpty: true,
    stop: function(event, ui) {
      var order = [];
      ui.item.closest('ul').children('li').each(function() {
        order.push($(this).data('position'));
        var q = $(this).text();
        alert(q);
      });
...