JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<h2>Items</h2>

<ul id="top" data-bind="foreach: items">
    <li>
        Item <strong data-bind="text: name"></strong>
        <em>(DOM elem created <span data-bind="text: new Date"></span>)</em>
    </li>
</ul>

<button data-bind="click: simpleShuffle">Shuffle them</button>

<button data-bind="click: simpleAdd">Add Item</button>


<ul data-bind="foreach: items">
    <li>
        Item <strong data-bind="text: name"></strong>
        <em>(DOM elem created <span data-bind="text: new Date"></span>)</em>
    </li>
</ul>

JavaScript

function MyViewModel() {
    this.items = ko.observableArray([
        { name: 'Alpha' }, { name: 'Beta' }, { name: 'Gamma' }, { name: 'Delta' }
    ]);

    this.simpleShuffle = function() {
        this.items.sort(function() {
            return Math.random() - 0.5; // Random order
        });
    };
    
    this.simpleAdd = function() {
         $("#top").append("<li>New item</li>");
    }
}
    
ko.applyBindings(new MyViewModel());