JSFiddle - React, Tailwind, and code Playground

by luisvsilva

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<table>
    <tbody data-bind='foreach: items'>
        <tr>
            <td>
                <select data-bind="
                    options: availableToChoose,optionsCaption: 'Choose...', value:selectedValue" >
                </select>
            </td>
        </tr>
    </tbody>
</table>
<p>
    Selected Values: <span data-bind="text:selectedValues"></span>
</p>
<p>
    Filtered Values: <span data-bind="text:filteredValues"></span>
</p>

JavaScript

$(function($){
    
    var Item = function(itemName, vm){
        var self = this;
        
        self.selectedValue = ko.observable();
        self.itemName = ko.observable();
        self.mainVM = vm;
        self.availableToChoose = ko.computed(function(){
           var temp = self.mainVM.filteredValues().slice(0); //clones the array
            if (self.selectedValue()!=null)
            {
                temp.push(self.selectedValue());
            }
            return temp;
        });
       
    }
    
    var vm = function(){
        var self = this;
        
        self.items = ko.observableArray();
        self.availableValues = ko.observableArray(["A","B","C","D","E"]);
        
        
        self.selectedValues = ko.computed(function () {
            var temp = [];
            for(var i=0;i<self.items().length;i++)
            {
                var selectedValue =   self.items()[i].selectedValue();
                if (selectedValue!=null)
                {
                     temp.push(selectedValue);   
                }
            }
            return temp;
        });
        
        self.filteredValues = ko.computed(function () {
            var temp = ko.observableArray(self.availableValues().slice(0));
            temp.removeAll(self.selectedValues());
            return temp();
        });
        
        //Load all the items
         var items = [
            new Item("item1",self),
            new Item("item2",self),
            new Item("item3",self)
        ];
        self.items(items);
         
        
    }
                    
    ko.applyBindings(new vm());
});