JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
<form class="col-xs-12">
  <div class="type-fields">
    <div class="form-group">
      <label for="regional">Regional</label>
      <select class="form-control" id="regional">
        <option value="16.4" selected>Sul</option>
        <option value="12.9">Norte</option>
        <option value="12.9">Centro</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="treinamentos">Treinamento Realizado</label>
      <select class="form-control" id="treinamentos">
        <option value="0">Não</option>
        <option value="0.25">1</option>
        <option value="0.5">2</option>
        <option value="0.75">3</option>
        <option value="1.0" selected>4</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="original-di">ORIGINAL DI</label>
      <input type="text" class="form-control" id="original-di">
    </div>
    <div class="form-group">
      <label for="wg-scout">WG/Scout</label>
      <input type="text" class="form-control" id="wg-scout">
    </div>
    <div class="form-group">
      <label for="transorb-r">TRANSORB R</label>
      <input type="text" class="form-control" id="transorb-r">
    </div>
    <div class="form-group">
      <label for="ultra">ULTRA</label>
      <input type="text" class="form-control" id="ultra">
    </div>
    <div class="form-group">
      <label for="sumisoya">SUMISOYA</label>
      <input type="text" class="form-control" id="sumisoya">
    </div>
  </div>
  
  <div class="form-group">
    <label for="qtd-litros">Qtd Litro Equivalente</label>
    <input type="text" class="form-control" id="qtd-litros" readonly>
  </div>
  <div class="form-group">
    <label for="vol-kregs">Volume em Kregs</label>
    <input type="text" class="form-control" id="vol-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="vol-inc-kregs">Volume Incentivo...

CSS

.currency{
  position: relative;
}
.currency:after{
  content: 'R$';
  position: absolute;
  left: 12px;
  top: 0;
  height: 100%;
  line-height: 35px;
}
.currency input{
  padding-left: 35px;
}

JavaScript

var field = {
		regional: $('#regional'),
		treinamentos: $('#treinamentos'),
		original_di: $('#original-di'),
    wg_scout: $('#wg-scout'),
    transorb_r: $('#transorb-r'),
    ultra: $('#ultra'),
    sumisoya: $('#sumisoya'),
    qtd_litros: $('#qtd-litros'),
    vol_kregs: $('#vol-kregs'),
    vol_inc_kregs: $('#vol-inc-kregs'),
    fator_calculo: $('#fator-calculo'),
    premio_roundup: $('#premio-roundup'),
    premio_sumi: $('#premio-sumi'),
    premio_total: $('#premio-total')
};

function calculateAll(){
	var ea_calculado = {
  		original_di: 370 / 360,
  		wg: 720 / 360,
      transorb_r: 1.3,
      ultra: 1.8
  };
  
	var calculo_prod = {
  		original_di: ea_calculado.original_di * removeCommas(field.original_di.val()),
  		wg: ea_calculado.wg * removeCommas(field.wg_scout.val()),
      transorb_r: ea_calculado.transorb_r * removeCommas(field.transorb_r.val()),
      ultra: ea_calculado.ultra * removeCommas(field.ultra.val()),
      sumisoya: removeCommas(field.sumisoya.val())
  };
  
  var calculo_prod_total = Number(calculo_prod.wg + calculo_prod.transorb_r + calculo_prod.ultra);
  if(calculo_prod_total.toString().indexOf('.') != -1){
  		calculo_prod_total = calculo_prod_total.toString().split('.')[0];
  }
  
  
  var fator_kreg = {
  		original_di: Number((calculo_prod.original_di / 3.785) / 1000),
      wg: Number((calculo_prod.wg / 3.785) / 1000),
      transorb_r: Number((calculo_prod.transorb_r / 3.785) / 1000),
      ultra: Number((calculo_prod.ultra / 3.785) / 1000)
  };
  
  var calculo_incentivo_kreg = fator_kreg.wg + fator_kreg.transorb_r + fator_kreg.ultra;
  
  
  
  /*fator calculo*/
  var fator_calculo = Number(calculo_prod.wg * 1.50 + calculo_prod.ultra * 2.00 + calculo_prod.transorb_r * 1.00) / calculo_prod_total;
  
  /*premiacoes*/
  var premio_roundup;
  var c_prod = calculo_prod_total.toString().split('.').join('');
  if(calculo_incentivo_kreg <= 10){
  	premio_roundup = 0.09 * calculo_prod_total * fator_calculo * 1000;
  }else...