JSFiddle - React, Tailwind, and code Playground

by Fabrice Colas

HTML

<body>
    <select style='width:20%' size='8' multiple='multiple' data-bind="options: myList, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedMyList "></select>
    <button data-bind="click: moveRight">Move right</button>
    <button data-bind="click: moveLeft">Move left</button>
    <select style='width:20%' size='8' multiple='multiple' data-bind="options: myOtherList, optionsText: 'name',
optionsValue: 'id', selectedOptions: selectedMyOtherList "></select>
</body>

JavaScript

var vm = function() {
    var self = this;
    
    self.someFunction = function() {
        alert('hello');
    };
    
    //object containers
    self.myList = ko.observableArray();
    self.myOtherList = ko.observableArray();
    
    //selected ids
    self.selectedMyList = ko.observableArray();
    self.selectedMyOtherList = ko.observableArray();
    
    self.moveLeft = function() {
        var sel = self.selectedMyOtherList();
        for (var i = 0; i < sel.length; i++) {
            var selCat = sel[i];
            var result = self.myOtherList.remove(function(item) {
                return item.id == selCat;
            });
            if (result && result.length > 0) {
                self.myList.push(result[0]);
            }
        }
        self.selectedMyOtherList.removeAll();
    }
    
    self.moveRight = function() {
        var sel = self.selectedMyList();
        for (var i = 0; i < sel.length; i++) {
            var selCat = sel[i];
            var result = self.myList.remove(function(item) {
                return item.id == selCat;
            });
            if (result && result.length > 0) {
                self.myOtherList.push(result[0]);
            }
        }
        self.selectedMyList.removeAll();
    }

    
    self.myList.push({ id: 1
                      , name: 'Option 1'
                     });
    self.myList.push({ id: 2
                      , name: 'Option 2'
                     });
    self.myList.push({ id: 3
                      , name: 'Option 3'
                     });
    self.myList.push({ id: 4
                      , name: 'Option 4'
                     });
    self.myList.push({ id: 5
                      , name: 'Option 5'
                     });
    self.myList.push({ id: 6
                      , name: 'Option 6'
                     });
    self.myList.push({ id: 7
                      , name: 'Option 7'
                     });
    

}

if (window.addEventListener) {
   ...