Endpoint no longer drags with Anchor after Anchor ID is changed after creation - JSPlumb

I'm building an editor and when I place a shape (also requires entering ID for that shape) onto the canvas, endpoints get created and attached to the shape. The ID of the shape is used for the endpoints to anchor onto.

   //Function which anchors endpoints onto shapes.

   var _addEndpoints = function (sourceAnchors, targetAnchors, id) {
   
    for (var i = 0; i < sourceAnchors.length; i++) {
        var sourceUUID = sourceAnchors[i];
 
        epp = jsPlumbInstance.addEndpoint(id, sourceEndpoint, {
            anchor: sourceAnchors[i], uuid: sourceUUID
        });
        sourcepointList.push([id , epp]);
        epp = null;
    }
    for (var j = 0; j < targetAnchors.length; j++) {
        var targetUUID = targetAnchors[j];
        epp = jsPlumbInstance.addEndpoint(id, targetEndpoint, {
            anchor: targetAnchors[j], uuid: targetUUID
        });
        
        endpointList.push([id, epp]);
        epp = null;
    }

};

function drawElement(element, canvasId, id) {
    $(canvasId).append(element);
    _addEndpoints(properties[0].startpoints, properties[0].endpoints, id);
    jsPlumbInstance.draggable(jsPlumbInstance.getSelector(".jtk-node"), {
        grid: [20, 20]
    });         
  }

This works perfectly fine as the endpoints work fine and drag with the shape, however one functionality for my editor I would like is being able to change the ID after clicking on the shape. When the ID is changed, the endpoints no longer drag with the shape. They do still drag on there own however. I have attempted to the following to update the ID in the endpoints by updating the anchor and element.

  //My solution attempt
  jsPlumbInstance.selectEndpoints().each(function(endpoint) {
      endpoint.setElement(anchor); //anchor is the same anchor as before with updating ID.
      endpoint.setAnchor(x, y, newID);  //new ID is the new ID the anchor now has
  });

However I get the following error.

jsPlumb function failed : TypeError: Cannot read property 'el' of undefined

Looking into the properties of the endpoints there are alot of properties which still have the old ID value, and I have no Idea how to update all of these at the same time. Can anyone please help me out?

Found a fix which was rather simple in the end, instead of what I was doing before, the following does the trick

jsPlumbInstance.setId(oldID, ID);

Instead of changing the anchorID manually and then doing the same for the endpoints, the above instance tells JSPlumb to change the ID for you while at the same time update the ID everywhere in JSPlumb.