JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.15-all-min.js"></script>
<div id="one" class="d">one</div>
<div id="two" class="d">two</div>

<button>change types</button>

CSS

.d {
    position:absolute;
    width:3em;height:3em;
    border:1px solid red;
}
#one {
    top:30px;left:50px;
}
#two {
    top:200px;left:150px;
}

JavaScript

jsPlumb.ready(function() {
   
    jsPlumb.registerEndpointTypes({
        type1:{
            endpoint:"Dot",
            paintStyle:{ fillStyle:"red" }
        },
        "type2":{
            paintStyle:{ fillStyle:"transparent" }
        },        
      	type4:{
            paintStyle:{ fillStyle:"red" }
        },
        "type3":{
             paintStyle:{ fillStyle:"blue" }
        }
    });
  
      jsPlumb.registerConnectionTypes({

    });
    
    var e1 = jsPlumb.addEndpoint("one",{type:"type1"});
    var e2 = jsPlumb.addEndpoint("two",{type:"type1"});    
  var e3 =  jsPlumb.connect({source:e1,target:e2,type:"type3"});
    
    $("button").click(function() {
        e1.toggleType("type2");
        e2.toggleType("type2");  
		e3.toggleType("type3");       
    });
    
});