JQuery - unique class control using onChange

Question

I am using jQuery colorpicker in an application. When a color is selected and selected, the color is displayed in the range class ".swatch". However, when there are two color choices on the same page, span.swatch will display the same color as the color. (see screenshot).

Screenshot here: http://cl.ly/2MUU

Here is the code I'm using

jQuery('.colorselect').ColorPicker({
    onSubmit: function ( hsb, hex, rgb, el ) {
        jQuery(el).val(hex);
        jQuery(el).ColorPickerHide();
    },
    onBeforeShow: function () {
        jQuery(this).ColorPickerSetColor(this.value);
    },
    onChange: function (hsb, hex, rgb) {
        jQuery('.swatch').css('backgroundColor', '#' + hex);
    }
})

Answer 1

try it

$.each($('.colorselect'),function(){
    var $target = $(this);
    $(this).ColorPicker({
            onSubmit: function ( hsb, hex, rgb, el ) {
                           jQuery(el).val(hex);
                           jQuery(el).ColorPickerHide();
            },
            onBeforeShow: function () {
                     jQuery(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                     $target.find('.swatch').css('backgroundColor', '#'+hex);
            }
    });
});

Answer 2

onChange: function (hsb, hex, rgb) { 
        jQuery(this).find('.swatch').css('backgroundColor', '#' + hex); 
    }

That should work - Haven tried it himself, though.