JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table>
    <tr>
        <td>ID: </td>
        <td>
            <span data-bind="text: id" />
        </td>
    </tr>
    <tr>
        <td>Name: </td>
        <td>
            <input type="text" data-bind="value: name" />
        </td>
    </tr>
    <tr>
        <td>Designation: </td>
        <td>
            <input data-bind="value: designation" />
        </td>
    </tr>
</table>
<br />
<br />
<p>
    Name of the person: <span data-bind="text: name"></span>
</p>
<p>
    Designation of the person: <span data-bind="text: designation" />
</p>

JavaScript

var person = {
        "id": 10,
        "name": "Ravi",
        "designation": "Software Engineer"
    };

    var personKO = function () {
        var self = this;
        self.id = ko.observable();
        self.name = ko.observable();
        self.designation = ko.observable();
    }

    var personMapper = function (dto, item) {
        item.id(dto.id)
            .name(dto.name)
            .designation(dto.designation);
        return item;
    }

    $(function () {
        var observedPerson = personMapper(person,new personKO());
        ko.applyBindings(observedPerson);
    });