Display anchors/connectors on either side of an element

Question

I am working with the jsPlumb library of JS where I drop elements onto a canvas and then try to connect them to each other at their endpoints/connectors. But for my query object I need the two anchors to appear on either side of the element( the "in" anchor on the left and the "out" anchor on the right). I tried aligning the connection divs as shown in my code below, but it doesn't work. Currently, the two are appended on the same side, the left. Would appreciate some input in this regard.

JS Function

function dropCompleteQueryElement(newAgent,i,e) 
{
    $(droppedElement).draggable({containment: "container"});

    var finalElement =  newAgent;
    r++; q++;

    var connectionIn = $('<div align="left">').attr('id', i + '-in').addClass('connection').text("in");
    var connectionOut = $('<div align="right">').attr('id', i + '-out').addClass('connection').text('out');

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

    finalElement.append(connectionIn);
    finalElement.append(connectionOut);

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

    jsPlumb.draggable(finalElement, {
        containment: 'parent'
    });

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

    jsPlumb.makeSource(connectionOut, {
        anchor: 'Continuous'
    });

    var myNode = document.getElementById("lot");
    var fc = myNode.firstChild;

    while( fc ) {
        myNode.removeChild( fc );
        fc = myNode.firstChild;
    }

}

Answer 1

Solved it using a css class for the individual connectors. But if there is a direct way/ jsPlumb method to directly do this, I will be open to suggestions as well.

JS Function

function dropCompleteQueryElement(newAgent,i,e) 
{
    $(droppedElement).draggable({containment: "container"});

    var finalElement =  newAgent;
    r++; q++;

    var connectionIn = $('<div class="connectorIn">').attr('id', i + '-in').addClass('connection').text("in");
    var connectionOut = $('<div class="connectorOut">').attr('id', i + '-out').addClass('connection').text('out');

CSS

.connectorIn{
    float: left;
    margin-top: 25%;
    margin-left: -10%;
}

.connectorOut{
    float: right;
    margin-top: 25%;
    margin-right: -10%;
}