Multiple nodes dragging

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://rawgit.com/sporritt/jsPlumb/2.1.5/dist/js/jsPlumb-2.1.5.js"></script>
<div>
  <div id="editor" data-bind="foreach: nodes">
        <div class="node" data-bind="text: id, attr: { id: id }, style: { left: pos.X + 'px', top: pos.Y + 'px' }"> 
  </div>
</div>
<div>
  <button id="select" data-bind="click: select">Select</button>
</div>

CSS

#editor {
  height: 300px;
  width: 300px;
}

.node {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 20px;
  background: orange;
}

JavaScript

jsPlumb.ready(function() {
  jsPlumb.importDefaults({
                  Container: "editor",
                  PaintStyle: {
                      lineWidth: 3,
                      strokeStyle: "#7a7a7a",
                      joinstyle: "Dot",
                      outlineColor: 'white',
                      outlineWidth: 0
                  }
              });

  var model = {
    nodes: ko.observableArray([
      {id: "el1", pos: { X: 10, Y: 10} },
      {id: "el2", pos: { X: 80, Y: 80} },
      {id: "el3", pos: { X: 80, Y: 110} }
    ]),
    select: function() {
    	for (var i = 0; i < model.nodes().length; ++i) {
      	var item = document.getElementById(model.nodes()[i].id);
        item.style.border = "1px solid green";
    		jsPlumb.addToDragSelection(item);  
      }
    }
  };



  ko.applyBindings(model);

  var addAnchors = function(node) {
    var nodeElement = document.getElementById(node.id);
    jsPlumb.draggable(nodeElement) ;
    jsPlumb.addEndpoint(nodeElement, 
    	{ isSource: true, endpoint:"Dot", anchor:[ "Right", { shape:"Circle" } ]},
      { uuid: "s" + node.id });
    jsPlumb.addEndpoint(nodeElement, 
    	{ isTarget: true, endpoint:"Dot", anchor:[ "Top", { shape:"Circle" } ]},
      { uuid: "t" + node.id });
  },
  addSourceEndpoint = function(node) {
    var nodeElement = document.getElementById(node.id);
    jsPlumb.addEndpoint(nodeElement, 
    	{ isSource: true, endpoint:"Dot", anchor:[ "Bottom", { shape:"Circle" } ]},
      { uuid: "sb" + node.id });
  };

  addAnchors(model.nodes()[0]);
  addSourceEndpoint(model.nodes()[0]);
  addAnchors(model.nodes()[1]);
  addAnchors(model.nodes()[2]);
  
  jsPlumb.connect({ uuids: ["sel1", "tel2"]});
  jsPlumb.connect({ uuids: ["sbel1", "tel3"]});
});