JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.9-all.js"></script>
<div id="demo">

    <div id="p1" class="p p-existing">
        <div class="c cs">drag<div class="ep"></div></div>
        <div class="c cs">drag<div class="ep"></div></div>
        <div class="c cs">drag<div class="ep"></div></div>

    </div>
    <div class="alone" style="top:170px;left:244px">drag<div class="ep"></div></div>

    <div id="p2" class="p p-existing" style="top:300px;left:400px;">
        <div class="c ct">drop<div class="ep"></div></div>
        <div class="c ct">drop<div class="ep"></div></div>
        <div class="c ct">drop<div class="ep"></div></div>
    </div>

    <!-- note this div lacks the "p-existing" class, which means it will not be initialised
             draggable along with the other two.  this is to test the case where a div is made draggable and
             contains divs with endpoints registered -->
    <div id="p3" class="p p-existing" style="top:120px;left:400px;">
        <div class="c ct">drop<div class="ep"></div></div>
        <div class="c ct">drop<div class="ep"></div></div>
        <div class="c ct">drop<div class="ep"></div></div>
    </div>

</div>

CSS

#demo {
            margin-top:5em;
        }

        ._jsPlumb_connector {
            z-index:1;
        }

        ._jsPlumb_endpoint {
            z-index:6;
        }

        .dragHover { border:1px dotted red; }

        .p {
            position:absolute;
            width:10em;
            height:10em;
            text-align:center;
            border:1px solid black;
            z-index:5;
            background-color:white;
            opacity:0.9;
        }

        .alone{
            position: absolute;
            width:4em;
            height:2em;
            background-color: green;
            text-align: center;
            border:1px solid black;
            z-index:5;
            
        }

        .c {
            width:4em;
            height:2em;
            margin:1em;
            background-color:#ffd700;
        }

        .ep {
            float:right;
            width:1em;
            height:1em;
            background-color:#994466;
            cursor:pointer;
        }

JavaScript

var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
        var R,G,B;
        R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
        G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
        B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
        curColourIndex = curColourIndex + 1;
        if (curColourIndex > maxColourIndex){
            curColourIndex = 1;
        }
        return "rgb(" + R + "," + G + "," + B + ")";
    };

    initEndpoints = function(nextColour) {
        $(".ep").each(function(i,e) {
            var p = $(e).parent();
            jsPlumb.makeSource($(e), {
                parent: p,
                //anchor:"BottomCenter",
                anchor:"Continuous",
                connector:[ "Straight", { curviness:20 } ],
                connectorStyle:{ strokeStyle:nextColour(), lineWidth:2 },
                maxConnections:-1,
                isSource: false
            });
        });
    };

    jsPlumb.ready(function() {
        jsPlumb.importDefaults({
            Container:$("body"),
            Endpoint : ["Dot", {radius:2}],
            HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth:2 },
            ConnectionOverlays : [
                [ "Arrow", {
                    location:.5,
                    id:"arrow",
                    foldback:0.8
                } ],
                [ "Label", { label:"", id:"label" }]
            ],
            MaxConnections:-1
        });

        jsPlumb.draggable($(".p-existing"));
        jsPlumb.draggable($(".alone"));

        initEndpoints(nextColour);

        jsPlumb.bind("jsPlumbConnection", function(conn) {
            conn.connection.setPaintStyle({strokeStyle:nextColour(), lineWidth:2});
        });

        jsPlumb.makeTarget($(".c"), {
            dropOptions:{ hoverClass:"dragHover" },
            anchor:"Continuous",
            isTarget: true

        });

        // delete on click
        jsPlumb.bind("click",...