JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.10-all-min.js"></script>
<html>
    <head>
        <script>
            function prepareListeners() {
              jsPlumb.Defaults.Container = $("#container");
              $(".toggleButton").click(function() {
               if ($(".box").size()) {
                var oldEndpoints = jsPlumb.getEndpoints($(".box"));
                $(oldEndpoints).each(function() {
                  jsPlumb.deleteEndpoint(this);
                });
                $(".box").remove();
                return;
               }
               var html = "<div class='box'></div>";
               $("#container").append(html);
               var element = $(".box");
               jsPlumb.addEndpoint(element, {anchor: "RightMiddle"}, {
                 endpoint: ["Image", {src: "https://www.google.com/images/icons/product/chrome-48.png"}]
               });
              });              
            }
            
            window.setTimeout(prepareListeners, 100)
        </script>
    </head>
    <body>
        <input type="button" value="toggleElement" class="toggleButton" />
        <div id="container">
            
        </div>
    </body>
</html>

CSS

div.box {
    width: 50px;
    height: 50px;
    border: 2px solid black;
}