JSFiddle - React, Tailwind, and code Playground

HTML

<div id="View1">
    <p>Value:<input type="text" data-bind="value:someValue" /></p>
    <p>Calculated:<span data-bind="text:grandTotal"></span></p>
    
</div>
<div id="View2">
    <p>Value:<input type="text" data-bind="value:someValue" /></p>
    <p>Calculated:<span data-bind="text:grandTotal"></span></p>
</div>

JavaScript

function BaseVM(){
    var self = this;
    self.someValue = ko.observable();
    self.grandTotal = ko.computed(function () {
       return self.someValue()+1; 
    });
}

function Vm1(initValue){
    var self = this;
    self.someValue(initValue);
}

Vm1.prototype = new BaseVM();
Vm1.prototype.constructor=Vm1;



function Vm2(){
    var self = this;
    self.someValue(13); 
}

Vm2.prototype = new BaseVM();
Vm2.prototype.constructor=Vm2;


ko.applyBindings(new Vm1(4),document.getElementById("View1"));
ko.applyBindings(new Vm2(),document.getElementById("View2"));