jquery cookie plugin: saving positions of various elements with same class?

i have some drag and drop items, which are just draggable vertically within my body.

$("ul.bars li").draggable({ containment: "body"});

so the user can drag the items wherever he wants. now i wanna save the position of each element with the jquery cookie plugin.

when the page is reloaded i want to position each element again on the saved position.

so whenever the drag is stopped i开发者_运维技巧 save the cookie:

$("ul.bars li").draggable({
    stop: function(event, ui) {
        var currentPos = $(this).position();
        $.cookie('position', currentPos.top );
    }
});

and when the page is reloaded (dom ready) i run through each element and query the last position saved in the cookie.

$(function() {
    $("ul.bars li").each(function() {
        var savedPosition = $.cookie('position');
        $(this).css({ top: savedPosition });        
    });
});

that's my basic idea, however i have no idea how i can save a seperate cookie for each element so the position can be distinguished. currently i overwrite the same cookie every time i drag an element.

how can i add some kind of a distinguishable variable to position each element at the same position where it was left before the page reload? any creative idea how to solve that?

thank you

$("ul.bars li").draggable({
    stop: function(event, ui) {
        var currentPos = $(this).position();
        $.cookie('position' + $(this).index(), currentPos.top );
    }
});

$(function() {
    $("ul.bars li").each(function() {
        var savedPosition = $.cookie('position' + $(this).indeX());
        $(this).css({ top: savedPosition });        
    });
})