Question

I am using js/jquery to create draggable graph. Graph has two draggable elements that select values on graph based behind. My problem now is that next step would be to be able to multiply up to six graphs on one page, which i did, now when graphs are created dynamically, only way to reference element is by $(this), how will adress both elements in same function?

EDIT:

function drag_function(event, ui) {

    var $selFirst = $(".second :nth-child(1)"),
        $selSecond = $(".second :nth-child(2)"),
        cachedWidth = $selFirst.outerWidth();

    var $firstRightBorder = $selFirst.position().left + 1,
        $secondLeft = $selSecond.position().left,
        diff = $firstRightBorder - $secondLeft;
}

If I use :

function drag_function(event, ui) {

    var $selFirst = $(this),
        $selSecond = $(this),
        cachedWidth = $selFirst.outerWidth();

    var $firstRightBorder = $selFirst.position().left + 1,
        $secondLeft = $selSecond.position().left,
        diff = $firstRightBorder - $secondLeft;
}

also doesnt work??

ANSWER:

 var $selFirst = $(this).parent().children().eq(0),
        $selSecond = $(this).parent().children().eq(1)

Answer 1

It is still not clear what you want to achieve. I guess it is this. Please drag and drop the divs in example given below.

http://jsfiddle.net/diode/8wxCb/1/

In event handler functions this and event.currentTarget will refer to the object for which the event has occurred.

for e.g:

button1.onclick = function(event){

     console.log(this);  // button1
     console.log(event.currentTarget);  // button1

}

So if you add same function as listener to many, in the function you can check

if(this == button1){

}else if(this == button2){

}

or

if(this.id == "button1"){

}else if(this.id == "button2"){

}

As you get the object inside the function you can directly read/write it’s properties

see: http://jsfiddle.net/diode/nZQy6/