JSFiddle - React, Tailwind, and code Playground

by Harshitha Naidu

HTML

<input type="hidden" class="form-control" name="" id="subtA" value="5000">
<input type="hidden" class="form-control" name="" id="servicetax" value="10">
<input type="hidden" class="form-control" name="" id="sbc" value="10">
<input type="hidden" class="form-control" name="" id="kkc" value="10">
<input type="hidden" class="form-control" name="" id="wht" value="500">
<input type="hidden" class="form-control" name="" id="subtD" value="4540">


<div class="form-group">

  <label class="col-md-3 control-label"> Basis</label>

  <div class="col-md-6">
    <select class="form-control" id="basis">
      <option>--SELECT--</option>
      <option value="1">Equal</option>
      <option value="2">Between 1 to 3 division</option>
      <option value="3">Specific</option>
      <option value="4">Others</option>
    </select>

  </div>

</div>

<div class="form-group box red">

  <label class="col-md-3 control-label"> Division</label>

  <div class="col-md-6">
    <select class="form-control" id="division">

      <option value="1">Div1</option>
      <option value="2">Div2</option>
      <option value="3">Div3</option>
      <option value="4">Div4</option>
      <option value="5">Div5</option>
    </select>

  </div>

</div>

<table class="table table-bordered table-condensed table-stripped">
  <thead>
    <tr>
      <th>Type</th>

      <th>Div 1</th>
      <th>Div 2</th>
      <th>Div 3</th>
      <th>Div 4</th>
      <th>Div 5</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>Total A</td>

      <input type="hidden" name="type[]" value="Subtotal A">
      <td>
        <input type="" name="div1[]" class="form-control" id="subtotalA1">
      </td>
      <td>
        <input type="" name="div2[]" class="form-control" id="subtotalA2">
      </td>
      <td>
        <input type="" name="div3[]" class="form-control" id="subtotalA3">
      </td>
      <td>
        <input type="" name="div4[]" class="form-control" id="subtotalA4">
      </td>
      <td>
        <input type=""...

CSS

.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
}

JavaScript

$(document).ready(function() {
  $("#basis").change(function() {
    $(this).find("option:selected").each(function() {
      if ($(this).attr("value") == "3") {
        $(".box").not(".red").hide();
        $(".red").show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});


var calcObject = {



  run: function() {


    var basis = $('#basis').val();
    var subtA = $('#subtA').val();
    var othertax = $('#othertax').val();
    var subtB = $('#subtB').val();
    var servicetax = $('#servicetax').val();
    var sbc = $('#sbc').val();
    var kkc = $('#kkc').val();
    var subtC = $('#subtC').val();
    var subtD = $('#subtD').val();
    var wht = $('#wht').val();
    var rate = $('#rate').val();
    var division = $('#division').val();


    if (basis == '1') {

      calcObject.subtotalA = (subtA / 5);
      calcObject.st = ((servicetax) / 5);
      calcObject.sbc = ((sbc) / 5);
      calcObject.kkc = ((kkc) / 5);
      calcObject.wht = (wht / 5);
      calcObject.subtD = (subtD / 5);


      $('#subtotalA1').val(parseFloat(calcObject.subtotalA).toFixed(2));
      $('#subtotalA2').val(parseFloat(calcObject.subtotalA).toFixed(2));
      $('#subtotalA3').val(parseFloat(calcObject.subtotalA).toFixed(2));
      $('#subtotalA4').val(parseFloat(calcObject.subtotalA).toFixed(2));
      $('#subtotalA5').val(parseFloat(calcObject.subtotalA).toFixed(2));

      $('#st1').val(parseFloat(calcObject.st).toFixed(2));
      $('#st2').val(parseFloat(calcObject.st).toFixed(2));
      $('#st3').val(parseFloat(calcObject.st).toFixed(2));
      $('#st4').val(parseFloat(calcObject.st).toFixed(2));
      $('#st5').val(parseFloat(calcObject.st).toFixed(2));

      $('#sbc1').val(parseFloat(calcObject.sbc).toFixed(2));
      $('#sbc2').val(parseFloat(calcObject.sbc).toFixed(2));
      $('#sbc3').val(parseFloat(calcObject.sbc).toFixed(2));
      $('#sbc4').val(parseFloat(calcObject.sbc).toFixed(2));
     ...