How to retain endpoint information while using jsplumb.connect()?

Question

I've been trying to make programmatic connections through jsplumb.connect() and as of now, I've been able to connect elements by maintaining source and anchor information.

However, The endpoints break the connection on detach rather than allowing me to draw another connection without detaching itself from position.

Code for jsplumb.connect that I'm using:

connection = plumb.connect({
            source:parsed_conn_list[j].source, 
            target:parsed_conn_list[j].target,
            anchors:parsed_conn_list[j].anchors,
            reattach:true,
            paintStyle:{lineWidth: 4, strokeStyle: '#000'},
            connector: ["Bezier", { curviness: 70 }],
            deleteEndpointsOnDetach:false,
            overlays:[ 
                [ "Arrow", { width:14, length:14, location:0.93, id:"arrow" } ]
            ]
});

Any help would be really appreciated.

Edit:

Hi All, This is the current working code that I'm using to add endpoints instead of just adding source/target ids:

final_source = plumb.getEndpoints(parsed_conn_list[j].source)[0]
final_target = plumb.getEndpoints(parsed_conn_list[j].target)[0]

connection = plumb.connect({
            source:final_source, 
            target:final_target,
            //anchors:parsed_conn_list[j].anchors,
            reattach:true,
            paintStyle:{lineWidth: 4, strokeStyle: '#000'},
            connector: ["Bezier", { curviness: 70 }],
            deleteEndpointsOnDetach:false,
            overlays:[ 
                [ "Arrow", { width:14, length:14, location:0.93, id:"arrow" } ]
            ]
});

Answer 1

The way I like to do it is :

1. Create endpoints on source & target elements.
2. Call jsPlumb.connect with the endpoints instead of source/target ids.
3. Now, when you detach the connection, the endpoints are not removed.