JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="https://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.2-all.js"></script>
<p>
    <a onclick="$('#tab1').show();" href="#">Show 1</a>, 
    <a onclick="init($('#tab1'));" href="#">Init 1</a>, 
    <a onclick="$('#tab1').hide();" href="#">Hide 1</a>
</p>
<p>
    <a onclick="$('#tab2').show();" href="#">Show 2</a>, 
    <a onclick="init($('#tab2'));" href="#">Init 2</a>, 
    <a onclick="$('#tab2').hide();" href="#">Hide 2</a>
</p><br>

<div id="tab1" class="tab">
    <div id="a" class="view">
        <span>A</span>
    </div>
    <!--<div id="c" class="view">
        <span>C</span>
    </div>-->
</div>
<div id="tab2" class="tab">
    <div id="b" class="view">
        <span>B</span>
    </div>
</div>

CSS

div.tab {
    background-color: #eee;
    border: 1px solid #ccc;
    display: none;
    position: relative;    
    height: 10em;
    width: 20em;
}

div.view {
    background-color: #ccc;
    position: absolute;
    padding: 1em;
    z-index: 2;
}

._jsPlumb_endpoint {
    z-index: 3;
}

#a {
    top: 2em;
    left: 3em;
}
#b {
    top: 6em;
    left: 5em;
}
#c {
    top: 10em;
    left: 12em;
}

JavaScript

jsPlumb.Defaults.EndPointParams = {
    isSource: true,
    isTarget: true,
    endpoint: [ 'Dot', {} ]
};

jsPlumb.Defaults.EndpointStyle = { fillStyle: 'rgba(0,0,0,.5)' };
jsPlumb.Defaults.LogEnabled = true;

init = function( elem ) {
    var instance = elem.data( 'jsplumb' );
    
    if ( instance == null ) {
        instance = jsPlumb.getInstance( jsPlumb.Defaults );
        instance.setRenderMode( jsPlumb.CANVAS );
        elem.data( 'jsplumb', instance );
        console.debug( 'new instance=%o', instance );
        
        instance.addEndpoint( elem.find( 'div.view' ), jsPlumb.Defaults.EndPointParams );
    }
    else {
        instance.repaintEverything();
    }
}