JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<ul data-bind="foreach: people">
    <li data-bind="text: name, click: $root.select,
           css: {red: $data == $root.selectedPerson()}" >
    </li>
</ul>    

<input type="button" data-bind="click: removeSelected" value="removeSelected"/>

CSS

.red {
    color: red;
}

JavaScript

// Instead of:
var viewModelJson = '[{"name": "Pepe", "age": "12"},{"name":"Juan, "age": "25"}]';
var viewModel = $.parseJSON(viewModelJson);

// DO this directly:

var people = ["name": "Pepe", "age": "12"},{"name":"Juan, "age": "25"];

var PeopleModel = function(people) {
    var self = this;
    self.selectedPerson = ko.observable();    // This will hold the selected person
    self.people = ko.mapping.fromJS(people);  // Note ko.mapping!!
    self.select = function(person) { // The event receives the current data as parameter
        self.selectedPerson(person);
    };
    self.delete = function(person) {
        // find de index of person and remove (splice) it from the observable array
        self.people.splice(self.people.indexOf(person),1);
    }
    self.removeSelected = function() {
        if (self.selectedPerson()) {
            self.delete(self.selectedPerson());
        }
    };
    return self;
};

var peopleModel = new PeopleModel(people);

ko.applyBindings(peopleModel);