How to add new container in JSPlumb dynamically?

I have a JS fiddle here

In this document, I have two containers which have connectors. My query is how can i add a new container which will have connectors like these have green and pink dots on clicking a button.

HTML

<html>

<body>
     <button id="aDD" onclick="AddDiv();" style="width:10px;height:10px;" value="Add New Div"></button>
    <div>
        <div id="a" class="a window" style="width: 100px; height: 100px; border: solid 1px">
        </div>
        <br>
        <div id="b" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
        </div>
    </div>
</body>
</html>

JQuery

    var a = $("#a");
    var b = $("#b");

    //Setting up drop options
    var targetDropOptions = {
        activeClass: 'dragActive'
    };

    //Setting up a Target endPoint
    var targetColor = "#316b31";
    var targetEndpoint = {
        anchor: "TopCenter", 
        endpoint: ["Dot", { radius: 8}],
        paintStyle: { fillStyle: targetColor},
        isSource: true,
        scope: "green dot",
        connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
        connector: ["Flowchart"],
        maxConnections: -1,
        isTarget: true,
        dropOptions: targetDropOptions
    };

    //Setting up a Source endPoint
    var sourceColor = "#ff9696";
    var sourceEndpoint = {
        anchor: "BottomCenter",
        endpoint: ["Dot", { radius: 8}],
        paintStyle: { fillStyle: sourceColor },
        isSource: true,
        scope: "green dot",
        connectorStyle: { strokeStyle: sourceColor, lineWidth: 8 },
        connector: ["Bezier", { curviness: 63}],
        maxConnections: -1, 
        isTarget: true,
        dropOptions: targetDropOptions
    };

    jsPlumb.bind("ready", function () {

        //Set up endpoints on the divs
        jsPlumb.addEndpoint($(".window"), targetEndpoint);
        jsPlumb.addEndpoint($(".window"), sourceEndpoint);

        jsPlumb.draggable($(".window"));
    });

Solution

Add below JS Function on Button Click

function AddDiv() {
            var Div = $('<div>', { id: "X12" }, 
                                 { class: 'window ui-draggable' })
                      .css(
                                 { height: '100px', 
                                   width: '100px', 
                                   border: 'solid 1px' 
                                 }
                          ).appendTo('body');
            jsPlumb.addEndpoint($(Div), targetEndpoint);
            jsPlumb.addEndpoint($(Div), sourceEndpoint);
            jsPlumb.draggable($(Div));
            $(Div).addClass('window');
        }

My JSFiddle is here