jQuery Colorpicker add multiple color pallettes in one div

Question

I am using Spectrum Colorpicker and need to add multiple colorpicker pallettes in one div. By default it has to show only one colorbox, onclick of +add it has to add one more colorbox and so on...

Thanks in Advance for your help,

My HTML Code:

<!-- Color Picker -->
<div class="colorpicker-container">
    <input class="full" />
    <a href="#">+ Add</a>  
</div>
<!-- /Color Picker -->

Can somebody please help me out?

Answer 1

Try something like this:

HTML

 <!-- Color Picker -->
    <div class="colorpicker-container">
        <input class="full" />
        <a class="add" href="#">+ Add</a>  
    </div>
    <!-- /Color Picker -->

JQuery

  $(document).on("click", ".add", function(){
           $(this).before("<input class='full' />"); 
            $('.full:empty').spectrum({
               showPaletteOnly: true, // if you want to only have the palette
               showPalette:true,
               palette: [ // here the colors you want to have on your palette
                 ['black', 'white', 'blanchedalmond',
                 ['red', 'yellow', 'green', 'blue', 'violet']
               ]
            });
        });