JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<h4>People</h4>
<ul data-bind="foreach: people.sort(function(l,r) { return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1)})">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>

JavaScript

function AppViewModel() {
    var self = this;

    self.people = ko.observableArray([
        {name: 'Bert'}, 
        {name: 'Charles'}, 
        {name: 'Denise'},
        {name: 'Adam' }
    ]);

    self.addPerson = function () {
        self.people.push({
            name: "Aardvark"
        });
    };

    self.removePerson = function () {
        self.people.remove(this);
    };
}

ko.applyBindings(new AppViewModel());