JSFiddle - React, Tailwind, and code Playground

by Geo Morillo

HTML

A1: <input type="text" data-bind="value: A1" name="A1" id="A1">&nbsp;&nbsp;B1: <input type="text" data-bind="value: B1" name="B1" id="B1"><br>
A2: <input type="text" data-bind="value: A2" name="A2" id="A2">&nbsp;&nbsp;B2: <input type="text" data-bind="value: B2" name="B2" id="B2"><br>
A: <input type="text" data-bind="value: A" name="A" id="A">&nbsp;&nbsp;B: <input type="text" data-bind="value: B" name="B" id="B">
&nbsp;&nbsp;C: <input type="text" data-bind="value: C" name="C" id="C">

JavaScript

var ViewModel = function () {
     self = this;
     self.A1 = ko.observable(0);
     self.B1 = ko.observable(0);
     self.A2 = ko.observable(0);
     self.B2 = ko.observable(0);
     self.A = ko.observable(0);
     self.B = ko.observable(0);
     self.C = ko.observable(0);
     self.A1.subscribe(function(newval){
           self.A(parseFloat(newval) + parseFloat(self.A2()))
     });
     self.A2.subscribe(function(newval){
           self.A(parseFloat(self.A1()) + parseFloat(newval));
     });
     self.B1.subscribe(function(newval){
           self.B(parseFloat(newval) + parseFloat(self.B2()))
     });
     self.B2.subscribe(function(newval){
           self.B(parseFloat(self.B1()) + parseFloat(newval));
     });
     self.A.subscribe(function(newval){
           self.C(parseFloat(newval) + parseFloat(self.B()))
     });
     self.B.subscribe(function(newval){
           self.C(parseFloat(self.A()) + parseFloat(newval));
     });
     
 };
            ko.applyBindings(new ViewModel());