Two jQuery colorpickers controlled classes

Question

My problem: http://www.danieldoktor.dk/test3/test3.html

when you choose a color in either of the palettes it sets the color for both of the boxes.

I would like an overall code to control each of the palettes.

So when you choose a color from the palette in the upper box it only changes the background color of the upper box, and the same with the lower box.

I need the code to be with classes and not ids, because later on it will be used with php.

MY MARKUP:

HTML

 <div class="lists">
        <header class="box_header" id="box1">
            <h1>HEADER 1</h1>
            <!--<div class="setting"></div>-->
            </header>
            <input type='text' class='flatPalette' value="#DDD" />
 </div>

 <div class="lists">
        <header class="box_header" id="box2">
            <h1>HEADER 2</h1>
            <!--<div class="setting"></div>-->
            </header>
            <input type='text' class='flatPalette' value="#DDD" />
 </div>

jQuery

function updateBackground(color) {
    $(".lists").css("background", color.toHexString());
}

$(function() {


$(".flatPalette").spectrum({
    flat: true,
    showInput: true,
    showPaletteOnly: true,
    showPalette:true,
    maxPaletteSize: 10,
    palette: [
        ['black', 'white', 'blanchedalmond',
        'rgb(255, 128, 0);', 'hsv 100 70 50', "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)"],
        ['red', 'yellow', 'green', 'blue', 'violet']
    ],
    change: updateBackground
});

});

Can anyone please HELP?

Answer 1

you are targeting everything with a class of .lists

so you either need to name them different and call it for each of them or target them separately and use $(this) to return the correct one

something like this:

function updateBackground(color) {
     $(this).parents(".lists").css("background", color.toHexString());
}

Answer 2

You need to restrict the color change to parents of the element that got changed, like so:

function updateBackground(color) {
    $(this).parents(".lists").css("background", color.toHexString());
}

I haven't tried that code, but it should work just fine.