JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>
<ul data-bind="colorPicker: selcol1"></ul>
Selected color div: <span data-bind="text: selcol1"></span>
<ul data-bind="colorPicker: selcol2"></ul>
Selected color div: <span data-bind="text: selcol2"></span>

CSS

ul.color-picker {
  list-style: none;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 290px;
  height: 25px;
  padding: 4px 0px 4px 4px;
}
ul.color-picker > li {
  box-sizing: border-box;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white;
  width:25px;
  height:25px;
  background-color: white;
}
ul.color-picker li:hover, ul.color-picker li.selected {
  border-width: 2px;
  border-style: solid;
  border-color: red;
  cursor: pointer;
}
.color_1 a, .color_1 {
  background-color: rgb(140, 179, 225) !important;
}
.color_2 a, .color_2 {
  background-color: rgb(229, 183, 182) !important;
}
.color_3 a, .color_3 {
  background-color: rgb(215, 227, 187) !important;
}
.color_4 a, .color_4 {
  background-color: rgb(203, 191, 217) !important;
}
.color_5 a, .color_5 {
  background-color: rgb(182, 221, 231) !important;
}
.color_6 a, .color_6 {
  background-color: rgb(251, 212, 179) !important;
}
.color_7 a, .color_7 {
  background-color: rgb(216, 216, 216) !important;
}
.color_8 a, .color_8 {
  background-color: rgb(154, 186, 89) !important;
}
.color_9 a, .color_9 {
  background-color: rgb(191, 80, 77) !important;
}
.color_10 a, .color_10 {
  background-color: rgb(147, 137, 84) !important;
}

JavaScript

ko.bindingHandlers.colorPicker = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element),
          value = valueAccessor();

        $element.addClass("color-picker");

        var li = document.createElement("li");
        li.setAttribute('data-bind', 'attr: { "class": "color_" + $data }, css: { selected: $data === ' + value() + ' }');
        $element.append(li);

        ko.applyBindingsToNode(element, {
          foreach: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        });

        $element.find("li").on('click', function () {
          var data = ko.dataFor(this);
          value(data);
          
          $element.find('li').removeClass('selected');
          $(this).addClass('selected');
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
          alert('disposing');
        });

        return {
          controlsDescendantBindings: true
        };
      }
    };

    function MyViewModel() {
      var self = this;
      self.selcol1 = ko.observable(4); // start with selected color no 4
      self.selcol2 = ko.observable(6); // start with selected color no 6
    }


    ko.applyBindings(new MyViewModel());