JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

HTML

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="myCssClass">
    <form data-bind="submit:addItem">
        Add item: <input type="text" data-bind='value:itemToAdd, valueUpdate: "change"' />
        <button type="submit" class="btn btn-success">Add</button>
    </form>
     <div data-bind="visible: allItems().length > 0">
     <br/>
    <p>Your Items:</p>
    <select multiple="multiple" size=10 style="width: 15em;" data-bind="options:allItems, selectedOptions:selectedItems, attr: {name: name},"> </select> <br/>
<button data-bind="click: removeSelected, enable: selectedItems().length > 0" class="btn btn-warning">Remove</button>
    <button data-bind="click: sortItems, enable: allItems().length > 1" class="btn btn-default">Sort</button>
    </div>
</div>

CSS

body { font-family: verdana; font-size: 14px; }

JavaScript

var BetterListModel = function () {
    var self = this;
    
    self.itemToAdd = ko.observable("");
    self.allItems = ko.observableArray([]); // Initial items
    self.selectedItems = ko.observableArray([]);  // Initial selection
    self.name = "Mark";
   
    self.addItem = function () {
        if ((self.itemToAdd() != "") && (self.allItems.indexOf(self.itemToAdd()) < 0)) // Prevent blanks and duplicates
            self.allItems.push(self.itemToAdd());
        self.itemToAdd(""); // Clear the text box
    };
 
    self.removeSelected = function () {
        self.allItems.removeAll(self.selectedItems());
        self.selectedItems([]); // Clear selection
    };
 
    self.sortItems = function() {
        self.allItems.sort();
    };
};
 
ko.applyBindings(new BetterListModel());