Question

I currently have a total of 4 boxes with the same class and each has its own ID, when any of the boxes are clicked, the background colors of all the boxes should change to that of an assigned div ID.

I do want to have it be a specific color as in the current JS fiddle example, I want it to be what ever color a particular div is.
i.e. #box2 will change color on .click to that of #box1 and #box1 will change to the color of #box4. thus giving the illusion of the boxes moving clockwise. I want this to be usable for an unlimited number of clicks.

        $(document).ready(function () {
            $('.colorbox').click(function () {
                $('#box1').css('background-color', 'blue');
                $('#box2').css('background-color', 'red');
                $('#box3').css('background-color', 'yellow');
                $('#box4').css('background-color', 'green');           
            });
        });

See http://jsfiddle.net/YMqyE/

Answer 1

Like this? http://jsfiddle.net/YMqyE/2/

$(document).ready(function () {
        $('.colorbox').click(function () {
            var $b1 = $('#box1'),
                $b2 = $('#box2'),
                $b3 = $('#box3'),
                $b4 = $('#box4'),
                box4Color = $b4.css('background-color');
            $b4.css('background-color', $b3.css('background-color'));
            $b3.css('background-color', $b2.css('background-color'));
            $b2.css('background-color', $b1.css('background-color'));
            $b1.css('background-color', box4Color);

        });
    });