Calculation of jQuery chained percentage

Question

Good I have the challenge of calculating the final value of the product on the same page without refresh, with 4 discount fields on a gross value showing the unit and total result (items of a purchase order or Invoice whatever the assigned name is) . I think the image makes it easier to assess the result I want. Entering the quantity and percentage field, automating the fields "Unitario" and "Total" change as if it were an excel calculator or spreadsheet.

Gross = gross key price

Chained discounts = discounts to be applied on the gross price of merchandise.

Example: Gross = $100,00 - Quantity = 2 pieces

Discounts to be applied: 40+10+10+29

Total unit = $34,506

Item total (* quantity) = $69.01

Thanks in advance.

This was the closest to the result. In this case it multiplies the unitario by the quantity what is wrong but if the unitario is 1, the discounts are calculated correctly:

    <input class="form-control" type="text" id="bruto" readonly="readonly" value="200">

    <input class="text-right form-control" type="number" placeholder="Qtde" name="qtde" id="qtde" autofocus="autofocus" required="required" pattern="[0-9]+([\.][0-9]+)?" />

    <input class="text-right form-control" name="desc1" type="number" placeholder="Des 1" id="desc1" size="5" maxlength="3" step="0.01" />
    <input class="text-right form-control" name="desc2" type="number" placeholder="Des 2" id="desc2" size="5" maxlength="3" step="0.01" />
    <input class="text-right form-control" name="desc3" type="number" placeholder="Des 3" id="desc3" size="5" maxlength="3" step="0.01" />
    <input class="text-right form-control" name="desc4" type="number" placeholder="Des 4" id="desc4" size="5" maxlength="3" step="0.01" />



    $('input').on('keyup',function(){

        var br = parseFloat($('#bruto').val() != '' ? $('#bruto').val() : 0); // bruto

        var qt = parseFloat($('#qtde').val()  != '' ? $('#qtde').val() : 0);  // qtde

        var d1 = parseFloat($('#desc1').val() != '' ? $('#desc1').val() : 0); // desconto 1
          
          // desconto 1
          $('#unitario').val(br-(br*(d1/100)));
          $('#total').val(qt*(br-(br*(d1/100))));

          // desconto 2  
          var tot = parseFloat($('#total').val() != '' ? $('#total').val() : 0);
          var d2  = parseFloat($('#desc2').val() != '' ? $('#desc2').val() : 0);
          var totd2 = tot-(tot*(d2/100));
         

          $('#unitario').val(totd2);
          $('#total').val(qt*totd2);
          

          // desconto 3  
          var d3 = parseFloat($('#desc3').val() != '' ? $('#desc3').val() : 0);

          $('#unitario').val(totd2-(totd2*(d3/100)));
          $('#total').val(qt*(totd2-(totd2*(d3/100))));

          // desconto 4
          var vlrD3 = totd2-(totd2*(d3/100));
          var d4    = parseFloat($('#desc4').val() != '' ? $('#desc4').val() : 0);
          //console.log(vlrD3-(vlrD3*(d4/100)));

          $('#unitario').val(vlrD3-(vlrD3*(d4/100)));
          $('#total').val(qt*(vlrD3-(vlrD3*(d4/100))));

    });

UPDATE: Now appeared the demand to insert the desired final value and from it, determine the discount on the gross value and fill the input field with the percentage. It would have to have enabled the two options: if the user fills the value-unitario-final already appears the discount in the desc1 input.

value-desc1 = (unit-final value / gross value) -1

Anyone have any idea how ?? Thank you..

Answer 1

I believe the problem lies only in the multiplications qt* intermediaries. Leave only at last $('#total').val which will have the expected result:

$('input').on('keyup',function(){

    var br = parseFloat($('#bruto').val() != '' ? $('#bruto').val() : 0); // bruto

    var qt = parseFloat($('#qtde').val()  != '' ? $('#qtde').val() : 0);  // qtde

    var d1 = parseFloat($('#desc1').val() != '' ? $('#desc1').val() : 0); // desconto 1

      // desconto 1
      $('#unitario').val(br-(br*(d1/100)));
      $('#total').val((br-(br*(d1/100))));

      // desconto 2  
      var tot = parseFloat($('#total').val() != '' ? $('#total').val() : 0);
      var d2  = parseFloat($('#desc2').val() != '' ? $('#desc2').val() : 0);
      var totd2 = tot-(tot*(d2/100));


      $('#unitario').val(totd2);
      $('#total').val(totd2);


      // desconto 3  
      var d3 = parseFloat($('#desc3').val() != '' ? $('#desc3').val() : 0);

      $('#unitario').val(totd2-(totd2*(d3/100)));
      $('#total').val((totd2-(totd2*(d3/100))));

      // desconto 4
      var vlrD3 = totd2-(totd2*(d3/100));
      var d4    = parseFloat($('#desc4').val() != '' ? $('#desc4').val() : 0);
      //console.log(vlrD3-(vlrD3*(d4/100)));

      $('#unitario').val((vlrD3-(vlrD3*(d4/100))).toFixed(2));
      $('#total').val((qt*(vlrD3-(vlrD3*(d4/100)))).toFixed(2));

});

//a linha abaixo é apenas para o exemplo
$('input').trigger('keyup');

.TableCSS table {
    font-size:12px; 
    color:#000; 
    width:100%; 
    border-width: 1px; 
    border-color: #a9a9a9;
    border-collapse: collapse;  
    zoom: 100%; 
    text-align:left;
}
.TableCSS th {
    white-space: nowrap!important;
    font-size:12px;
    background-color:#ffffff;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9; 
    text-align:left; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-style: italic;

}
.TableCSS tr {
    background-color:#ffffff; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    text-align:center;
}
.TableCSS td {
    font-size: 12px;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9;
    text-align:left;
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-top: 0px; 
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" type="text" id="bruto" readonly="readonly" value="100">
<input class="text-right form-control" type="number" placeholder="Qtde" value="2" name="qtde" id="qtde" autofocus="autofocus" required="required" pattern="[0-9]+([\.][0-9]+)?" />

<input class="text-right form-control" value="40" name="desc1" type="number" placeholder="Des 1" id="desc1" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="10" name="desc2" type="number" placeholder="Des 2" id="desc2" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="10" name="desc3" type="number" placeholder="Des 3" id="desc3" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="29" name="desc4" type="number" placeholder="Des 4" id="desc4" size="5" maxlength="3" step="0.01" />

<input id="unitario" />
<input id="total" />