How to calculate tax in salary

Question

I am working on a payroll project in which I want to calculate overtime, allowance and tax to salary. I want to add overtime and allowance to salary and subtract tax from salary.

The following script works with overtime and allowance but I'm facing problems with calculating tax.

When I enter a tax percentage it should calculate the tax amount from the salary to the tax field and calculate the total. When I enter the tax directly it should calculate the percentage to the taxPercentage field and calculate the total.

$(document).on('change keyup blur', '.add', function(e) {
  add();
});

function add() {
  salary = $('#salary').val();
  allowance = $('#allowance').val() || 0;
  over = $('#over').val() || 0;
  prevTotal = $('#total').val() || 9000;

  if (allowance > 0 || over > 0) {
    total = parseFloat(salary) + parseFloat(allowance) + parseFloat(over);
    $('#total').val(total);
  } else {
    $('#total').val(prevTotal);
  }
}

$(document).on('change keyup blur', '.tax', function(e) {
  subtracttax();
});

function subtracttax() {
  salary = $('#salary').val();
  taxPercentage = $('#taxPercentage').val() || 0;
  tax = $('#tax').val() || 0;
  prevTotal = $('#total').val() || 9000;

  if (taxPercentage > 0) {
    total = parseFloat(salary) * parseFloat(taxPercentage) / 100;
    $('#tax').val(total);
    $('#total').val(prevTotal - total);
  } else {
    $('#total').val(prevTotal);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
  <label> salary </label>
  <input type="text" id="salary" value="9000" />
</div>
<br>
<div>
  <label> over Time </label>
  <input type="text" class="add" id="over" />
</div>
<br>
<div>
  <label> allowance </label>
  <input type="text" class="add" id="allowance" />
</div>
<br>
<div>
  <label> Tax Percentage</label>
  <input type="text" class="tax" id="taxPercentage" />
</div>
<br>
<div>
  <label> Total Tax</label>
  <input type="text" class="tax" id="tax" />
</div>
<br>
<div>
  <label> Total salary</label>
  <input type="text" id="total" />
</div>

Answer 1

Try like this.

as per your comment I only added salary + over time.

calculateTax();
$(document).on('change keyup blur', '.tax', function(e) {
  calculateTax();
});

$(document).on('change keyup blur', '.taxVal', function(e) {
  calculateTaxPer();
});

function calculateTax() {
  salary = $('#salary').val();
  allowance = $('#allowance').val() || 0;
  over = $('#over').val() || 0;
  total = (parseFloat(salary) + parseFloat(allowance) + parseFloat(over)) || 0;
  taxPercentage = $('#taxPercentage').val() || 0;
  tax = $('#tax').val() || 0;
  $('#total').val(total);
  
  if (taxPercentage > 0) {
    totalTax = (parseFloat(salary) + parseFloat(over)) * parseFloat(taxPercentage) / 100;
    $('#tax').val(totalTax);
    $('#total').val(total - totalTax);
    return false;
  }
  
}

function calculateTaxPer(){
  salary = $('#salary').val();
  allowance = $('#allowance').val() || 0;
  over = $('#over').val() || 0;
  total = (parseFloat(salary) + parseFloat(allowance) + parseFloat(over)) || 0;
  taxPercentage = $('#taxPercentage').val() || 0;
  tax = $('#tax').val() || 0;
  $('#total').val(total);
  
  if(tax > 0){
    taxPer = (parseFloat(tax)/(parseFloat(salary) + parseFloat(over)))*100;
    $('#taxPercentage').val(taxPer);
    $('#total').val(total - tax);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
  <label> salary </label>
  <input type="text" id="salary" value="9000" />
</div>
<br>
<div>
  <label> over Time </label>
  <input type="text" class="tax" id="over" />
</div>
<br>
<div>
  <label> allowance </label>
  <input type="text" class="tax" id="allowance" />
</div>
<br>
<div>
  <label> Tax Percentage</label>
  <input type="text" class="tax" id="taxPercentage" />
</div>
<br>
<div>
  <label> Total Tax</label>
  <input type="text" class="taxVal" id="tax" />
</div>
<br>
<div>
  <label> Total salary</label>
  <input type="text" id="total" />
</div>

Answer 2

change this line in subtracttax function

prevTotal = $('#total').val() || 9000;

to

prevTotal = parseFloat(salary) + parseFloat(allowance) + parseFloat(over);

Problem is you are overriding the total value once the tax value is entered. Instead you should calculate totals each time you make changes.