JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js"></script>
<script src="https://github.com/harvesthq/chosen/blob/master/chosen/chosen-sprite.png"></script>
<select multiple="multiple" data-bind="options: allCustomers, selectedOptions: event().customers, optionsText: 'name', optionsValue: 'id', chosen: true " ></select>

CSS

select {
    width: 15em;
}

/* @group Base */ .chzn-container {   font-size: 13px;   position: relative;   display: inline-block;   zoom: 1;   *display: inline; } .chzn-container .chzn-drop {   background: #fff;   border: 1px solid #aaa;   border-top: 0;   position: absolute;   top: 29px;   left: 0;   -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);   -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);   -o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);   box-shadow        : 0 4px 5px rgba(0,0,0,.15);   z-index: 999; } /* @end */  /* @group Single Chosen */ .chzn-container-single .chzn-single {   background-color: #ffffff;   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));   background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);   background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);   background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);   background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);   background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);    -webkit-border-radius: 5px;   -moz-border-radius   : 5px;   border-radius        : 5px;   -moz-background-clip   : padding;   -webkit-background-clip: padding-box;   background-clip        : padding-box;   border: 1px solid #aaaaaa;   -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);   -moz-box-shadow   : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);   box-shadow        : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);   display: block;   overflow: hidden;   white-space: nowrap;   position: relative;   height: 23px;   line-height: 24px;   padding: 0 0 0...

JavaScript

$(document).ready(function()    
    {       
        function Event()
        {
            this.customers = ko.observableArray();
        };                     
        
        //for chosen plugin
        ko.bindingHandlers.chosen = {
            update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
                $(element).chosen();
            }
        }
    
        function ViewModel()
        {   
            this.event = ko.observable(new Event());
            this.allCustomers = ko.observableArray();
        };
                  
        var vm = new ViewModel();

        //this is where I read customer data from the server
        vm.allCustomers.push({
        "id": "1",
        "name": "John"});

        vm.allCustomers.push({
        "id": "2",
        "name": "Pete"});
         
        ko.applyBindings(vm);   

    });