Multiple javascript colour pickers

Question

I have a colour picker on my website. Which works great, However i'm wanting to have multiple for multiple elements to be different colour e.g. one text pink and the bg blue.

This is the code i have have at the moment (which works but changes both boxes) i'm missing an id somewhere but im not sure where.

  <div class="row">


  <script type="text/javascript">
  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];

var picker = $('#color-picker');

for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}

$('body').click(function () {
picker.fadeOut(1);
});

$('.call-picker').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
  var codeHex = $(this).data('hex');

  $('.color-holder').css('background-color', codeHex);
  $('#pickcolor').val(codeHex).trigger('change');
});
});
  </script>
      <div class="color-wrapper">
  <p>Choose color for Header</p>
   <!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
  <form name="test">
  <input type="text" name="custom_color" ng-model="Data.headerColor" placeholder="#FFFFFF" id="pickcolor" class="call-picker">
</form>
  <div class="color-holder call-picker"></div>
  <div class="color-picker" id="color-picker" style="display: none"></div>
</div>




  </div>
  <div class="row">


  <script type="text/javascript">
  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];

var picker = $('#color-picker2');

for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}

$('body').click(function () {
picker.fadeOut(1);
});

$('.call-picker2').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
  var codeHex = $(this).data('hex');

  $('.color-holder2').css('background-color', codeHex);
  $('#pickcolor2').val(codeHex).trigger('change');
});
});
  </script>
      <div class="color-wrapper">
  <p>Choose color for Header</p>
   <!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
  <form name="test">
  <input type="text" name="custom_color2" ng-model="Data.bodytextColor" placeholder="#FFFFFF" id="pickcolor2" class="call-picker2">
</form>
  <div class="color-holder2 call-picker2"></div>
  <div class="color-picker2" id="color-picker2" style="display: none"></div>
</div>

Answer 1

picker variable must change.

<script type="text/javascript">
  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];

var picker2 = $('#color-picker2');

for (var i = 0; i < colorList.length; i++ ) {
picker2.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}

$('body').click(function () {
picker2.fadeOut(1);
});

$('.call-picker2').click(function(event) {
event.stopPropagation();
picker2.fadeIn(1);
picker2.children('li').hover(function() {
  var codeHex = $(this).data('hex');

  $('.color-holder2').css('background-color', codeHex);
  $('#pickcolor2').val(codeHex).trigger('change');
});
});
  </script>