JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<form id = "frm" name = "frm">
        <fieldset>
            <legend>Your friend's basic information</legend>

            <div>
                <label for = "FirstName">First Name</label>
                <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" />
            </div>

            <div>
                <label for = "LastName">Last Name</label>
                <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" /> 
            </div>
        </fieldset>
<input type="button" value="manually changes" data-bind="click: change" />
    </form>

JavaScript

var viewModel = function () {
    var _vm = null,
    
    init = function () {
        
        _vm = {
          friend : ko.mapping.fromJS({
            firstName : 'Sathyaish',
            lastName : 'Chakravarthy'
            }),
            change: function(){
            _vm.friend.firstName('first name changed');
            }
        };

        ko.applyBindings(_vm, $('#frm').get(0));
    }
    
    return {
        init: init
    }

}();

$(document).ready(function(){
		viewModel.init();
});