JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div id="result">

    <p class="title"> Tax income of <b><span id="domIncome"></span></b> as follow: </p>
    
    

    <table class="table">
      <thead>
        <th>Percentage</th>
        <th>Amount</th>
        <th>Total</th>
      </thead>
      <tbody id="appendHere">
      </tbody>
      <tfoot>
        <td colspan="2" style="text-align:right"><b>Total Tax:</b></td>
        <td id="totalTax"></td>
      </tfoot>
    </table>
    
    <div class="description">
      <p>
        <u>So the total income after tax is</u>
        <span id="calculation"></span> 
        <span id="underpoint"></span>
      </p> 
    </div>
    
  </div>

CSS

.title {
  text-decoration:underline; 
  text-indext:14px; 
  margin:12px;
}

.table {
  max-width: 400px; 
  margin:auto; 
  padding:12px; 
}

.description {
  font-size:11px; 
}

#calculation,
#underpoint {
  display:block; 
  text-indent:16px; 
  font-style:italic; 
}

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

JavaScript

var detailMutaion = []; 

var userA_income = 75000000;  
var userB_income = 750000000; //change this on two function calls bellow 
var userC_income = 45000000;  

var resultAnnualIncomeTax = getAnnualIncomeTax(userB_income); 
printToTable(detailMutaion, userB_income);

function printToTable(detailTax, income) {
	//one
	var domIncomes = document.getElementById('domIncome'); 
  domIncomes.insertAdjacentHTML( 'beforeend', toRp(income) );

	//two
	var domTax = document.getElementById('appendHere'); 
	var html = ""; 
  var subTotal = 0; 
	for(var i=0; i<detailTax.length; i++) {
  	html += "<tr>";
	  	html += "<td>"+detailTax[i].percentage+"%</td>";   
	  	html += "<td>"+toRp(detailTax[i].rateRange)+"</td>";   
	  	html += "<td>"+toRp(detailTax[i].rateReducion)+"</td>";   
  	html += "</tr>";
    subTotal = subTotal + detailTax[i].rateReducion; 
  }
  domTax.insertAdjacentHTML( 'beforeend', html );

	//three
  var domSubTotal = document.getElementById('totalTax'); 
  domSubTotal.insertAdjacentHTML( 'beforeend', toRp(subTotal) );
 
 	//four
  var textCalc = toRp(income) +" - "+ toRp(subTotal); 
  var domCalculation = document.getElementById('calculation'); 
  domCalculation.insertAdjacentHTML( 'beforeend', textCalc );

 	//five
  var resCalc = income - subTotal; 
  var resCalculation = document.getElementById('underpoint'); 
  resCalculation.insertAdjacentHTML( 'beforeend', toRp(resCalc) );

}

function getAnnualIncomeTax(income){
  
  var currentRate = [
    {id: 1, min_cost:0, max_cost: 50000000, currency:'IDR', rate_percentage: 5},
    {id: 2, min_cost:50000000, max_cost: 250000000, currency:'IDR', rate_percentage: 15},
    {id: 3, min_cost:250000000, max_cost: 500000000, currency:'IDR', rate_percentage: 25},
    {id: 4, min_cost:500000000, max_cost: false, currency:'IDR', rate_percentage: 30}
  ];
 	    
    
  for(var i=0; i<currentRate.length; i++){

    if(income > 0) {
    	
      if(i == 0) {
      	if(currentRate[i].max_cost > income){
          rateRange =...