JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.11-all.js"></script>
   
 <div id="work-area">
     <div id="node1" ondblclick="createGraph('node1')" class="bb"><div>N1</div></div>
     <div id="node2" ondblclick="createGraph('node2')" class="bb"><div>N2</div></div>
     <div id="node3"ondblclick="createGraph('node3')" class="bb">N3</div>
    </div>

CSS

#node1{
        width: 100px;
        height: 30px;
        background-color:red; 
        position: absolute;
        left: 200px;
        border:0.1em solid blue;    
    }
    #node2{
        width: 100px;
        height: 30px;
        background-color:yellow; 
        position: absolute;
        border:0.1em solid blue;    
    }
      #node3{
        width: 100px;
        height: 30px;
        background-color:yellow;
        position: absolute;
        border:0.1em solid blue; 
        margin-top:200px;      
    }

    #work-area{
        width:300px;
        height:300px;
        background-color: gray;
    }

JavaScript

var v1="";
var v2="";
var connectArrow = {                
     connector:"StateMachine",
     paintStyle:{lineWidth:4,strokeStyle:"#056"},
     hoverPaintStyle:{strokeStyle:"#dbe300"},
     endpoint:"Blank",
     anchor:"Continuous",
     overlays:[["PlainArrow",{location:1,width:20,length:12}]]
    };
jsPlumb.draggable($(".bb"));
var testArray = new Array();

var ii=0;        
 createGraph = function(id){
    alert("double click");
    if (v1==""){
        v1=id;
        
    }else if(v2!=v1 && v2!=id){
        v2=id;
    }
    if((v1!="" && v2!="")){
         
         if (v1!=v2){   
    alert("creating graph");    
          var conn  = jsPlumb.connect({
                        source:""+v1+"",
                      target:""+v2+""
                      }, connectArrow);
            
          
        
         
           v1="";
           v2="";
      }
        
  
    }
}