JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jsplumbtoolkit.com/js/jquery.jsPlumb-1.7.4.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.registerEndpointType("type1", {
    endpoint:"Dot",
  paintStyle:{ fillStyle:"red"}
});
jsPlumb.registerEndpointType("type2", {
    endpoint:"Dot",
  paintStyle:{ fillStyle:"blue"}
});
    */
    
    jsPlumb.registerEndpointTypes({
        type1:{
            endpoint:"Dot",
            paintStyle:{ fillStyle:"red" }
        },
        type2:{
    endpoint:"Dot",
  paintStyle:{ fillStyle:"blue"}
        }
    });
    
    var e1 = jsPlumb.addEndpoint("one",{type:"type1"});
    var e2 = jsPlumb.addEndpoint("two",{type:"type1"});    
    jsPlumb.connect({source:e1,target:e2});
    
    $("button").click(function() {
        e1.toggleType("type2");
        e2.toggleType("type2");        
    });
    
});