Need help to get the right jsPlumb connections

Question

I want to have different input and output connectors for each item. The user should be able to plumb input and outputs togeher i.e. output-1 to input-1 or to input-2 or output-2 to input-1 or input-2.

The Problem is that I will get very wired connections between the items.

jsPlumb.ready(function() {

          var i = 0;

          $('#container').dblclick(function(e) {
            var newState = $('<div class="item"></div>');

            var connIn = $('<div>').addClass("connector").addClass("in");
            var in1 = $('<div>').text("I1");
            var in2 = $('<div>').text("I2");
            var connOut = $('<div>').addClass("connector").addClass("out");
            var out1 = $('<div>').text("O1");
            var out2 = $('<div>').text("O2");

            var title = $('<div>').addClass('title').text('State ' + i);
            var connect = $('<div>').addClass('connect');

            newState.css({
              'top': e.pageY,
              'left': e.pageX
            });

            jsPlumb.makeTarget(in1, {
              anchor: 'Continuous'
            });

            jsPlumb.makeTarget(in2, {
              anchor: 'Continuous'
            });

            jsPlumb.makeSource(out1, {
              parent: newState,
              anchor: 'Continuous'
            });

            jsPlumb.makeSource(out2, {
              parent: newState,
              anchor: 'Continuous'
            });

            //newState.append(title);
            //newState.append(connect);
            newState.append(connIn.append(in1).append(in2));
            newState.append(connOut.append(out1).append(out2));

            $('#container').append(newState);

            jsPlumb.draggable(jsPlumb.getSelector(".item"), { containment:"#container"});         
            i++;    
          });
        });

I have made a fiddle for demonstration http://jsfiddle.net/c9BJ9/2/ -> just double click in the box two times and connect some output O to an input I.

Answer 1

Since you didn't specify any container for the endpoints, by default it will take the parent DIV. While connecting endpoints having parent as different DIV's yields in weird connections. You need to specify a common container for all endpoints as:

jsPlumb.Defaults.Container=$("#container");