Why connection line shows away from Div in JSPlumb?

This is my JSFiddle

Query - When I am trying to establish the connnection between IDs A1 and B the connection pink line shows away from Div B. Below the pink line highlighted is away from Div B. This is the problem

JQuery

//Setting up drop options
var targetDropOptions = {

};

connectorHoverStyle = {
    lineWidth: 7,
    strokeStyle: "#2e2aF8",
    cursor: 'pointer'
}

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

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



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

    jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
    jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
    jsPlumb.animate($("#C"), { "left": 540, "top": 100 }, { duration: "slow" });
    jsPlumb.animate($("#D"), { "left": 780, "top": 100 }, { duration: "slow" });

    var window = jsPlumb.getSelector('.window');
    jsPlumb.addEndpoint(window, targetEndpoint);
    jsPlumb.addEndpoint(window, sourceEndpoint);
    jsPlumb.addEndpoint(jsPlumb.getSelector('#A1'), sourceEndpoint, targetEndpoint);

    jsPlumb.draggable(window);

    jsPlumb.importDefaults({
        ConnectionOverlays: [
            ["Arrow", { location: 0.8}],
            ["Label", {
                location: 0.5,
                id: "label",
                cssClass: "aLabel"
            }]
        ]
    });
});

HTML

<div id="A" class="a window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>A</strong>
    <div id="A1">
    </div>
</div>
<div id="B" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>B</strong>
</div>
<div id="C" class="c window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>C</strong>
</div>
<div id="D" class="d window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>D</strong>
</div>

Solution

I wanted to have multiple Anchors on the same Div provided ID should be the attributes for those anchors somehow.

In order to accomplish this. I first removed the extra div. Now Suppose somebody wants to display two Source Anchors. For that I made modification in jquery.jsPlumb-1.3.16-all-min.js file

Following was the Original line of code in this file

this.makeNode = function (E, D) { 
    return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2
}

Modification is below. I am now adding id attributes to each anchor(circle).

this.makeNode = function (E, D) { 
    var attr = $('#'+obj[0].endpoint.elementId).attr('actionID');
    return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2, id: attr 
}

How am I getting the value of id ?

In, the Div shown above in the query, I added an Attribute Action and assigned some ID that I want to assign. Like below

jsPlumb.getSelector('#first').attr('actionID', 'p1');

and finally adding the EndPoint

jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), sourceEndpoint);

Similarly, I can assign as many distinct Anchors in terms of IDs as much required.

jsPlumb.getSelector('#first').attr('actionID', 'p3');
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), [TopMiddle]);

How will you assign the Source ID and target ID on Connection ?

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
    if (CurrentConnection.connection.targetId == 
                                    CurrentConnection.connection.sourceId)
        jsPlumb.detach(CurrentConnection.connection);
    else {
        var obj = CurrentConnection.sourceEndpoint.canvas.children[0].firstChild.id;
        init(CurrentConnection.connection, obj);
    }
});

init = function (connection, CircleID) {
    connection.getOverlay("label").setLabel(CircleID + "-" + connection.targetId);
};

Hope this will be helpful to those users facing the same issue...