I have a large number of rows in a table within which I wish to attach a unique colorpicker (jQuery plugin) to each cell in a particular column identified by unique ids. Given this, I want to automate the generation of instances of the colorpicker as follows:

var myrows={"a","b","c",.....}
var mycolours={"ffffff","fcdfcd","123123"...}

for (var i=0;i<myrows.length;i++) {
    $("#"+myrows[i]+"colour").ColorPicker({flat: false,
    color: mycolours[i],
    onChange: function (hsb, hex, rgb) { 
        $("#"+myrows[i]+"currentcolour").css('backgroundColor', '#' + hex);
        }
}); 

Now this doesn't work because the evaluation of the $("#"+myrows[i]+"currentcolour") component occurs at the time the function is called, not when it is defined (which is want I need).

Given that this plugin javascript appends its code to the level and not to the underlying DOM component that I am accessing above so can't derive what id this pertains to, how can I evaluate the variable during function declaration/definition?

Thanks for any help/insight anyone can give.

Brian.