JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://localhost/programming/jsplumb-git/build/1.3.12/js/jquery.jsPlumb-1.3.12-all.js"></script>
<html>
    <head>
        <script>
            function prepareListeners() {
              jsPlumb.Defaults.Container = $("#container");
              $(".toggleButton").click(function() {
               if ($(".box").size()) {
jsPlumb.selectEndpoints({element:$(".box")}).delete();
                $(".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;
}