JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<div class="panel-heading">
     <h4 class="panel-title">Vehicle Information</h4>

</div>
<div class="panel-body">
    <div class="col-md-6">
        <div class="col-md-9" style="padding: 10px;">
            <table id="vehicle" class="display" cellspacing="0" width="100%" style="text-align:center;">
                <thead>
                    <tr>
                        <th>Reg No</th>
                        <th>Make</th>
                        <th>Colour</th>
                        <th>Chasis No</th>
                        <th>Mileage</th>
                        <th>Quantity</th>
                        <th>Unit Price</th>
                        <th>Additional Cost</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>BY56WMV</td>
                        <td>Mercedes</td>
                        <td>White</td>
                        <td>9857547857945</td>
                        <td>
                            <input type="text" name="newMileage" value="5000" style="width: 100%;" required>
                        </td>
                        <td>
                            <select name="qty">
                                <option value="1" selected>1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="unit_price" name="unit_price" value='£5600' style="width: 60%;">
                        </td>
                        <td>
                            <input type="text" name="add_cost" style="width: 60%;"...

JavaScript

var unitPrice=0;
$('input[type="radio"]').on('change', function () {
                var parent = $(this).parents('tr');
                var vehicleNo = parent.find('td:first').text();

                var qty = parseInt(parent.find('td select option:selected').text());
                //var unitPrice=parseInt(parent.find('td:nth-child(7) input').val().split('£')[1]);
                var extraCost=parseInt(parent.find('td:nth-child(8) input').val().split('£')[1]);
                var total = qty * unitPrice;
                var newTotal = total;
                var vat = newTotal + extraCost;
                vat = (vat * 1.2)- vat;
                var grandTotal = vat + newTotal + extraCost;
                $('#sub_total').val(total);
                $('#selectedReg').val(vehicleNo);
                $('#extras').val(extraCost);
                $('#vat').val(vat);
                $('#grandTotal').val(grandTotal);
              
            });

$('#sub_total').on('blur',function(){
      var vals=parseFloat($(this).val());
      if(vals!="" && !isNaN(vals))
      {
          var extra=$('#extras').val()!=""?parseFloat($('#extras').val()):0;
          var vat=vals+extra;
          vat=(vat*1.2)-vat;
          $("#vat").val(vat.toFixed(2));
          var grandTotal=vat+parseFloat($("#extras").val())+parseFloat($("#sub_total").val());
          $('#grandTotal').val(grandTotal);
      }
});