buildCallback returns bad instance

[dmar99]

Please see:
http://codepen.io/anon/pen/vGEEqe

When I click on one of the inputs, it becomes red (as expected), but when I click on the other one it doesn't.

[PitPik]

Hi @birdlord,
unfortunately there is only one instance of colorPicker, therefore buildCallback gets called only once.
You probably also need to know that the options are only valid from the first call (second set of options will be ignored). But I got a little trick how to solve your problem:

$('.color')
  .filter('[value=""]') // find empty inputs
    .data('prime', '#FF0000') // set default color as data on jQuery object
  .end() // go back to all $('.color') elements
  .colorPicker({ // init color picker
    renderCallback: function($elm, toggled) { // not buildCallback but renderCallback
      var data = $elm.data('prime'); // extract data from input field

      if (toggled === true && data) { // toggled === true means colorPicker just opened
        this.color.setColor(data);
        $elm
          .removeData('prime') // delete data so it doesn't come here again
          .val(data);
        this.render();
      }
    }
  });

In your case this would be

$('#colorOne').data('prime', '#FF0000').colorPicker({
  // ... with options as above
});
$('#colorTwo').data('prime', '#FF0000').colorPicker();

As you see, you don't need to pass any options to the second call.
Maybe a bit hacky but it works.

Hope this helped,
Cheers