JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<div class="form-group">
    <label for="emailaddress" class="col-sm-3 control-label">Tax</label>
    <div class="col-sm-9">
        <br>



        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0"/ />
                <span class="lbl">Tax Exempt</span>
            </label>
            <br>
        </div>

        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875"/>
                <span class="lbl">NYC 8.875%</span>
            </label>
            <br>
        </div>

        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
                <span class="lbl">LI 8.625%</span>
            </label>
            <br>
        </div>

        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
                <span class="lbl">NJ 7%</span>
            </label>
            <br>
        </div>

        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
                <span class="lbl">Philly 6%</span>
            </label>
            <br>
        </div>

        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
                <span class="lbl">CT 6.35%</span>
            </label>
            <br>
        </div>


    </div>


</div>

<table id="checkrequesttable"  class="table order-list2 table table-striped...

JavaScript

function doCalc() {
    var total = 0;
     
    $('tr').each(function() {
        $(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val());
    });
    $('.amount').each(function() {
        total += parseInt($(this).text(),10);
        
       
    });
   // $('div.total_amount').html(total);
    $("#partstotalvalue").val(total);
  
  
   
  
}

  function calculate() {
            var myBox1 = $( 'input[name=tax2]:checked' ).val(); //taxes value
           
            var myBox2 = document.getElementById('partstotalvalue').value; //parts total value

            var result = document.getElementById('partstax'); // input field for the total of taxes * parts

            var myResult = myBox1 * myBox2; //result = taxes * parts total

            result.value = myResult; // display the results



            var result2 = document.getElementById('partstotalwithtax');  // inputp field for taxes + total value

            var totalResult = myResult + myBox2; // totalresult = taxes on part + the parts total

            result2.value = totalResult; // display the results

          
            
        }
        
        
$(".input-small").on("focus blur select change click dblclick mousedown mouseup keypress keydown keyup", function (event) {
       
        doCalc();    
        calculate();
    $('div.total_amount').html(total);
     $("#partstotalvalue").val(total);
    });
    

    
$(document).ready(function () {
    var counter = 0;

    $("#addrow2").on("click", function () {

        counter = $('#checkrequesttable tr').length - 2;

        var newRow = $("<tr>");
        var cols = "";

        cols += '<td>Item</td>';
        cols += '<td><input class="input-small" type="text" name="var_' + counter + '"/></td>';
        cols += '<td><input class="input-small" type="text" name="var_1_' + counter + '"/></td>';
				cols += '<td>$<span class="amount"></span></td>';
        
        newRow.append(cols);
        if...