jsPlumb dynamic anchor

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all-min.js"></script>
    <body >
        
        <!-- Adds new windows to the page -->
        <div class="window" style="left: 600px" id="details">
            <p style="text-align: center">Window</p>
            <div class="button_container">
                <div class="button_add_window">Add</div>
            </div>
        </div>
        
        <!-- Primary window - used as html templated for descendants -->
        <div class="window" style="left: 20px" id="container0">
            <div class="button_container">
                <div class="button_add">Add</div>
                <div class="button_remove">Remove</div>
            </div>
        </div>

        <div class="window" style="left: 200px" id="container1">
        </div>
     

    </body>

CSS

.window { 
            background-color: #EEEEEF;
            border: 1px solid #346789;
            border-radius: 0.5em;
            box-shadow: 2px 2px 5px #AAAAAA;
            color: black;
            height: 5em;
            position: absolute;
            width: 5em;
        }

        .window:hover { 
            box-shadow: 2px 2px 19px #AAAAAA;
            cursor: pointer;
        }


        .button_add, .button_add_window, .button_remove, .button {
            background-color: deepskyblue;
            text-align: center;
            border: 1px solid;
        }

        .button_container {
            margin: 5px;
            background-color: #aaaaaa
        }

JavaScript

jsPlumb.ready(function () {

            //FIX DOM:
            $(("#container1"))[0].innerHTML = $(("#container0"))[0].innerHTML;

            //all windows are draggable
            jsPlumb.draggable($(".window"));


            var anEndpointSource = {
                endpoint: "Rectangle",
                isSource: true,
                isTarget: false,
                maxConnections: 1,

                anchor: [1, 0, 1, 0]
            };

            var anEndpointDestination = {
                endpoint: "Dot",
                isSource: false,
                isTarget: true,
                maxConnections: 1,
             
                anchor: [0, 1, -1, 0]
            };

            
            //Fixes endpoints for specified target
            function fixEndpoints(parentnode) {
                
                //get list of current endpoints
                var endpoints = jsPlumb.getEndpoints(parentnode);

                //there are 2 types - input and output
                
                var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                    return elementOfArray.isSource; //input
                });
                
                var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                    return elementOfArray.isTarget; //output
                });

                calculateEndpoint(inputAr, true);
                calculateEndpoint(outputAr, false);

                jsPlumb.repaintEverything();
            }

            //recalculate endpoint anchor position manually
            function calculateEndpoint(endpointArray, isInput) {

                //multiplyer
                var mult = 1 / (endpointArray.length+1);

                for (var i = 0; i < endpointArray.length; i++) {
                    
                    if (isInput) {

                        //position
                        endpointArray[i].anchor.x = 1;
                       ...