JSFiddle - React, Tailwind, and code Playground

by Ken Schroeder

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<input class="text"  type="number" name="NumUnit1" data-bind="value: numUnit1" id="NumUnit1" />
<input class="text"  type="number" name="Rate1" data-bind="value: rate1" id="Rate1" />
<input data-bind="value: total1" type="number" class="text" name="Total1" id="Total1"/> <br/>
<input class="text"  type="number" name="NumUnit2" data-bind="value: numUnit2" id="NumUnit2" />
<input class="text"  type="number" name="Rate2" data-bind="value: rate2" id="Rate2" />
<input data-bind="value: total2" type="number" class="text" name="Total2" id="Total2"/>
 <br/>
<input class="text"  type="number" name="NumUnit3" data-bind="value: numUnit3" id="NumUnit2" />
<input class="text"  type="number" name="Rate3" data-bind="value: rate3" id="Rate3" />
<input data-bind="value: total3" type="number" class="text" name="Total3" id="Total3"/>
 <br/>
<input class="text"  type="number" name="NumUnit4" data-bind="value: numUnit4" id="NumUnit2" />
<input class="text"  type="number" name="Rate4" data-bind="value: rate4" id="Rate4" />
<input data-bind="value: total4" type="number" class="text" name="Total4" id="Total4"/>
 <br/>
<input class="text"  type="number" name="NumUnit5" data-bind="value: numUnit5" id="NumUnit5" />
<input class="text"  type="number" name="Rate5" data-bind="value: rate5" id="Rate5" />
<input data-bind="value: total5" type="number" class="text" name="Total5" id="Total5"/>
 <br/>
<input class="text"  type="number" name="NumUnit6" data-bind="value: numUnit6" id="NumUnit6" />
<input class="text"  type="number" name="Rate6" data-bind="value: rate6" id="Rate6" />
<input data-bind="value: total6" type="number" class="text" name="Total6" id="Total6"/>
 <br/>
<input class="text"  type="number" name="NumUnit7" data-bind="value: numUnit7" id="NumUnit7" />
<input class="text"  type="number" name="Rate7" data-bind="value: rate7" id="Rate7" />
<input data-bind="value: total7" type="number"...

JavaScript

function ViewModel(){
        var self = this;
        
        self.numUnit1 = ko.observable('0');
        self.rate1 = ko.observable('0.00');
        self.total1 = ko.computed(function(){
            var linetotal1 = parseFloat(self.numUnit1()) * parseFloat(self.rate1());
            return linetotal1.toFixed(2);
        });
        self.numUnit2 = ko.observable('0');
        self.rate2 = ko.observable('0.00');
        self.total2 = ko.computed(function(){
            var linetotal2 = parseFloat(self.numUnit2()) * parseFloat(self.rate2());
            return linetotal2.toFixed(2);
        });
        self.numUnit3 = ko.observable('0');
        self.rate3 = ko.observable('0.00');
        self.total3 = ko.computed(function(){
            var linetotal3 = parseFloat(self.numUnit3()) * parseFloat(self.rate3());
            return linetotal3.toFixed(2);
        });
        self.numUnit4 = ko.observable('0');
        self.rate4 = ko.observable('0.00');
        self.total4 = ko.computed(function(){
            var linetotal4 = parseFloat(self.numUnit4()) * parseFloat(self.rate4());
            return linetotal4.toFixed(2);
        });
        self.numUnit5 = ko.observable('0');
        self.rate5 = ko.observable('0.00');
        self.total5 = ko.computed(function(){
            var linetotal5 = parseFloat(self.numUnit5()) * parseFloat(self.rate5());
            return linetotal5.toFixed(2);
        });
        self.numUnit6 = ko.observable('0');
        self.rate6 = ko.observable('0.00');
        self.total6 = ko.computed(function(){
            var linetotal6 = parseFloat(self.numUnit6()) * parseFloat(self.rate6());
            return linetotal6.toFixed(2);
        });
        self.numUnit7 = ko.observable('0');
        self.rate7 = ko.observable('0.00');
        self.total7 = ko.computed(function(){
            var linetotal7 = parseFloat(self.numUnit7()) * parseFloat(self.rate7());
            return linetotal7.toFixed(2);
        });
        self.numUnit8 =...