Updating Line Between Divs In Javascript

I'm trying to make a web page, where people can click on two objects and it creates a line between those two. But I want to go further on and be able to connect the last one with a

Solution 1:

You will need to cache the last element clicked.

See this fiddle: http://jsfiddle.net/RY6dM/

Based on your code and not doing any major changes:

$('img').click(function(){
    var $elem1 = $(this).parent();  // cache the spanvar $elem2 = $('span.last');    // cache the span with class last
    $(this).toggleClass('selected');
    if ($elem2.length > 0) {        // for the first time there is no cached elementconnect($elem1[0], $elem2[0], "#0F0", 5);
    } else { 
        $elem1.addClass('last');     // for subsequent clicks, cache last element
    }
    $('span').removeClass('last');    // remove class last from all spans
    $elem1.addClass('last');          // add class last to current element
});

Also, instead of:

document.body.innerHTML += htmlLine;

you need to do a :

$('body').append($(htmlLine));