JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div data-bind="foreach: users">
    <p data-bind="click: $root.onClick">
        <span data-bind="text: id"></span>
        <span data-bind="text: firstName"></span>
        <span data-bind="text: $root.isSelected($data)"></span>
        <span data-bind="text: $root.someFunc()"></span>
        <span data-bind="text: $root.someOtherFunc()"></span>
    </p>
</div>

JavaScript

$(function() {
    function ViewModel() {
        var self = this;
        self.users = [
            { id: 1, firstName: "Bob" },
            { id: 2, firstName: "David" },
            { id: 3, firstName: "Walter" }
            ];
        self.selectedId = ko.observable(1);
        self.isSelected = function(user) {
            return user.id === self.selectedId() ? "YES" : "NO";
        };
        self.onClick = function(user) {
            self.selectedId(user.id);
        };
        self.someFunc = function() {
            self.selectedId();
            console.log( 'I AM OBSERVED');
            return 'sf: ' + Math.random();
        };
        self.someOtherFunc = function() {
            // self.selectedId();
            console.log( 'AND I AM NOT');
            return 'na: ' + Math.random();
        }
    };
    ko.applyBindings(new ViewModel());
});