jQuery - unique control over a class using onChange

Question

I'm using jQuery colorpicker on an app. When a color is selected and being selected, the color is displayed in a span class ".swatch". However, when there are two color select options on a single page, the span.swatch will both display the same color as the color is being selected. (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

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

This should work - Havent tried it myself though.

Answer 2

That actually solved a problem I had elsewhere. But for this problem, it didn't work. The .swatch is not a descendant as the .colorselect is an input field. It's like

<input><span class="swatch"></span>

Is there anything that can select/find a non-child/descendant?