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" />
<hr />

<h2>Dealer Fit Options</h2>

<table id="dealerFitOptions" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Net Price</th>
            <th>Tax Band</th>
            <th>Tax Amount</th>
            <th>Total Price</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: OptionsModel.AvailableDealerFitOptions">
        <tr>
            <td>
                <label class="checkbox">
                    <input type="checkbox" class="optionCheck" /> <span data-bind="text: Description"></span>

                </label>
                <input type="hidden" class="optionTaxRate" data-bind="value: TaxRate" />
            </td>
            <td>
                <input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.formatNumber(NetPrice)" />
            </td>
            <td> <span data-bind="text: TaxBandDisplayName"></span>

            </td>
            <td> <span class="uneditable-input" data-bind="text:  $root.formatNumber(TaxAmount)"></span>

            </td>
            <td>
                <input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.getTotalDealerFitOptionPrice($data)" />
            </td>
        </tr>
    </tbody>
</table>

JavaScript

function viewModel() {
    var self = this;

    self.OptionsModel = {
        AvailableDealerFitOptions: ko.observableArray([{
            "Id": 345,
                "Description": "16\" steel wheels with centre wheel caps",
                "NetPrice": 0.0,
                "TaxAmount": 0.0,
                "TaxRate": 20.0,
                "TaxBandDisplayName": "Standard Rate"
        }, {
            "Id": 417,
                "Description": "230V socket on rear centre console",
                "NetPrice": 87.5,
                "TaxAmount": 17.5,
                "TaxRate": 20.0,
                "TaxBandDisplayName": "Standard Rate"
        }, {
            "Id": 465,
                "Description": "3 SPK PDK M/FNCTN ST/WHL IN SMOOTH LTR",
                "NetPrice": 296.67,
                "TaxAmount": 59.33,
                "TaxRate": 20.0,
                "TaxBandDisplayName": "Standard Rate"
        }, {
            "Id": 281,
                "Description": "AC PK A - TRAN SPTER WNDW/KOMBI",
                "NetPrice": 785.0,
                "TaxAmount": 0.0,
                "TaxRate": 0.0,
                "TaxBandDisplayName": "Zero Rate"
        }, {
            "Id": 433,
                "Description": "Air conditioning",
                "NetPrice": 1050.0,
                "TaxAmount": 52.5,
                "TaxRate": 5.0,
                "TaxBandDisplayName": "Discounted Rate"
        }, {
            "Id": 457,
                "Description": "Airbag pack A - Crafter",
                "NetPrice": 225.0,
                "TaxAmount": 11.25,
                "TaxRate": 5.0,
                "TaxBandDisplayName": "Discounted Rate"
        }, {
            "Id": 449,
                "Description": "Alarm pack A - Transporter",
                "NetPrice": 135.0,
                "TaxAmount": 0.0,
                "TaxRate": 0.0,
                "TaxBandDisplayName": "Zero Rate"
        }, {
            "Id": 273,
                "Description": "Alcantara...