JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder 3.0</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.jOrgChart.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
</head>
<body>
    <ul id="org" style="display: none;">
        <li>
            Food
            <ul>
                <li>
                    Fruit
                    <ul>
                        <li>Apples</li>
                        <li>Oranges</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div></div>
</body>
</html>

CSS

/* Basic styling */
/* Draw the lines */
.jOrgChart .line {
  height                : 20px;
  width                 : 4px;
}

.jOrgChart .down {
  background-color         : black;    
  margin                 : 0px auto;
}

.jOrgChart .top {
  border-top          : 3px solid black;
}

.jOrgChart .left {
  border-right          : 2px solid black;
}

.jOrgChart .right {
  border-left           : 2px solid black;
}

/* node cell */
.jOrgChart td {
  text-align            : center;
  vertical-align        : top;
  padding               : 0;
}

.jOrgChart .node .add_child{
    display: block;
    text-align: center;
    
}

/* The node */
.jOrgChart .node {
  background-color         : #35363B;
  display               : inline-block;
  width                 : 96px;
  height                : 60px;
  z-index                 : 10;
  margin               : 0 2px;
}

/* jQuery drag 'n drop */

.drag-active {
  border-style            : dotted !important;
}

.drop-hover {
  border-style            : solid !important;
  border-color             : #E05E00 !important;
}

JavaScript

/**
 * jQuery org-chart/tree plugin.
 *
 * Author: Wes Nolte
 * http://twitter.com/wesnolte
 *
 * Based on the work of Mark Lee
 * http://www.capricasoftware.co.uk 
 *
 * Copyright (c) 2011 Wesley Nolte
 * Dual licensed under the MIT and GPL licenses.
 *
 */
(function($) {

  $.fn.jOrgChart = function(options) {
    var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
    var $appendTo = $(opts.chartElement);

    // build the tree
    $this = $(this);
    var $container = $("<div class='" + opts.chartClass + "'/>");
    if($this.is("ul")) {
      buildNode($this.find("li:first"), $container, 0, opts);
    }
    else if($this.is("li")) {
      buildNode($this, $container, 0, opts);
    }
    $appendTo.append($container);

    // add drag and drop if enabled
    if(opts.dragAndDrop){
        $('div.node').draggable({
            cursor      : 'move',
            distance    : 40,
            helper      : 'clone',
            opacity     : 0.8,
            revert      : true,
            revertDuration : 100,
            snap        : 'div.node.expanded',
            snapMode    : 'inner',
            stack       : 'div.node'
        });
        
        $('div.node').droppable({
            accept      : '.node',          
            activeClass : 'drag-active',
            hoverClass  : 'drop-hover'
        });
        
      // Drag start event handler for nodes
      $('div.node').bind("dragstart", function handleDragStart( event, ui ){
        
        var sourceNode = $(this);
        sourceNode.parentsUntil('.node-container')
                   .find('*')
                   .filter('.node')
                   .droppable('disable');
      });

      // Drag stop event handler for nodes
      $('div.node').bind("dragstop", function handleDragStop( event, ui ){

        /* reload the plugin */ //mharris note: meaning to visually reload 
        $(opts.chartElement).children().remove();
        $this.jOrgChart(opts);      
      });
    
      // Drop...