JSFiddle - React, Tailwind, and code Playground

HTML

<div id="persons"> <span data-bind="text: selectedPerson().name"></span>
    <button data-bind="click: showLast" id="btnShowNext">Show Last</button>
    <br/>
    <button data-bind="click: showNext" id="btnShowNext">Show Next</button>
    <br/>
</div>

JavaScript

function ViewModel() {
    people = ko.observableArray([{
        name: "Bungle"
    }, {
        name: "George"
    }, {
        name: "Zippy"
    }]);
    showNext = function (person) {
        console.log(selectedIndex();
        selectedIndex(selectedIndex() + 1);
    };
    showLast = function (person) {
        console.log(selectedIndex();
        if (selectedIndex() == 0) {
            selectedIndex(people().length);
        } else {
        selectedIndex(selectedIndex() - 1);
        }
    };
    selectedIndex = ko.observable(0);
    selectedPerson = ko.computed(function () {
        return people()[selectedIndex()];
    });
}
ko.applyBindings(new ViewModel());