JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gromit.utopia.co.nz/~ballochd/js/libs/jquery.calculation.min.js"></script>
<form action="" method="post" id="frmCreateCheckboxRange" onSubmit="return false;"><fieldset><div id="formContent">
  <hr />
  <table width="500">
                <col style="width: 50px;" />
                <col />
                <col style="width: 60px;" />
                <col style="width: 110px;" />
                <tr>
                    <th>Qty</th>
                    <th align="left">Product</th>
                    <th>Price</th>
                    <th>Total</th>
                </tr>
                <tr>
                    <td align="center">
                             <input type="text" name="qty_item_1" id="qty_item_1" value="0" size="2" />
                    </td>
                    <td>
                        <a href="http://www.packtpub.com/jQuery/book">Horses</a>                    </td>
                    <td align="center" id="price_item_1">
                        $39.99                    </td>
                    <td align="center" id="total_item_1">
                        $39.99                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="qty_item_2" id="qty_item_2" value="0" size="2" />
                    </td>
                    <td>
                        <a href="http://jquery.com/">Chickens</a>
                    </td>
                    <td align="center" id="price_item_2">$54.99</td>
                    <td align="center" id="total_item_2">$14.99</td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="qty_item_3" id="qty_item_3" value="0" size="2" />
                    </td>
                  <td><a href="http://jquery.com/">Sheep</a> </td>
                  <td align="center" id="price_item_5"> $54.99 </td>
                  <td align="center"...

CSS

#testForm {
            width: 800px;
        }

        code {
            background-color: #e0e0e0;
        }

        #formContent p {
            clear: both;
            min-height: 20px;
        }

        #idCheckboxMsg{
            color: red;
            font-weight: bold;
        }

        #totalTextSum,
        .textSum,
        #totalTextAvg,
        .textAvg {
            border: 1px solid black;
            padding: 2px;
        }

JavaScript

var bIsFirebugReady = ( !! window.console && !! window.console.log);

function recalc() {
    $("[id^=total_item]").calc(
    // the equation to use for the calculation
    "(qty * price) + shipping",
    // define the variables used in the equation, these can be a jQuery object
    {
        qty: $("input[name^=qty_item_]"),
        price: $("[id^=price_item_]"),
        shipping: $("[name=sum]:checked")
    },
    // define the formatting callback, the results of the calculation are passed to this function

    function(s) {
        // return the number as a dollar amount
        return "$" + s.toFixed(2);
    },
    // define the finish callback, this runs after the calculation has been complete

    function($this) {
        // sum the total of the $("[id^=total_item]") selector
        var sum = $this.sum();

        $("#grandTotal").text(
        // round the results to 2 digits
        "$" + sum.toFixed(2));
    });
}

$(document).ready(

function() {
    // update the plug-in version
    $("#idPluginVersion").text($.Calculation.version);

    // bind the recalc function to the quantity fields
    $("input[name^=qty_item_]").bind("keyup", recalc);
    $("input[name=sum]").bind("click", recalc);
    // run the calculation function now
    recalc();

    // automatically update the "#totalSum" field every time
    // the values are changes via the keyup event
    $("input[name^=sum]").sum("keyup", "#totalSum");

    // automatically update the "#totalAvg" field every time
    // the values are changes via the keyup event
    $("input[name^=avg]").avg({
        bind: "keyup",
        selector: "#totalAvg",
        // if an invalid character is found, change the background color
        onParseError: function() {
            this.css("backgroundColor", "#cc0000");
        },
        // if the error has been cleared, reset the bgcolor
        onParseClear: function() {
            this.css("backgroundColor", "");
        }
    });

    // this calculates the...