JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

Net Price:
<input type="textbox" data-bind="value: NetPrice" />
<br />Tax Amount:
<label data-bind="html: TaxAmt"></label>
<br />Total:
<input type="textbox" data-bind="value: Total" />
<button onclick="_click();">CLICK</button>

JavaScript

function ViewModel() {
    var self = this;

    self.NetPrice = ko.observable(100);

    self.TaxRate = 0.2;

    self.TaxAmt = ko.computed(function () {
        return parseFloat(self.NetPrice()) * self.TaxRate;
    });

    self.Total = ko.computed({
        read: function () {
            return parseFloat(self.NetPrice()) + self.TaxAmt();
        },
        write: function (val) {
            var total = parseFloat(val);
            var taxAmt = total - total / (1 + self.TaxRate);
            self.NetPrice(total - taxAmt);
        }
    });
};

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

function _click() {
    console.log(viewModel);
    viewModel.NetPrice(600);
};