JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<div id="dati-dettaglio-linee">
  <div id="righe">
     <div class="linea"><!-- ripetizione linea -->

    <table id="table" class="table table-hover table-condensed table-bordered ">
        <thead>
            <th>Type</th>
            <th>Lease#</th>
            <th>Asset#</th>
            <th>Comment</th>
            <th>Amount</th>
          
        </thead>
<tr>
<td>
<select class="form-control" name="tradeupoptions1" id="tradeupoptions1" />
<option value="T/U To Keep">T/U To Keep</option>
<option value="T/U To Return">T/U To Return</option>
<option value="Partial T/U To Keep">Partial T/U To Keep</option>
<option value="Partial T/U to Rtn">Partial T/U to Rtn</option>
</select>
</td>
<td><input type="text" id="leasenumber1"/></td>
<td><input type="text" id="assett1"/></td>
<td><input type="text" id="comments1"/></td>
<td><input type="text" id="amount1" class="somma"/></td>

</tr>
 


</table>



          
          </div><!-- ripetizione linea -->
          </div><!-- righe -->
          <div class="link-button"><a href="javascript:;" id="addButton">ADD New</a></div>
          <div class="link-button"><a href="javascript:;" id="removeButton">REMOVE Previous</a></div>
          <div class="clear"></div>
                    <!-- <input class="button" type="submit" value="INVIA RICHIESTA" /> -->
          <div id="riepilogo-aliquote-nature">
            <ul>
              <li>Total: <span class="totale"><input type="text" value="" name="ImponibileImporto" /></span></li>
            </ul>
          </div>
</div><!-- dettaglio-linee -->

JavaScript

$(document).ready(function(){ 
  var counter = 2;
    $("#addButton").click(function () {
    //alert('Stai per aggiungere una linea di contenuto alla fattura');
       


$("#righe").append('<div  id="linea' + counter + '"><table id="table" class="table table-hover table-condensed table-bordered "><thead><th>Type</th><th>Lease#</th><th>Asset#</th><th>Comment</th><th>Amount</th></thead><tr id="0"><td><select class="form-control somma"><option value="T/U To Keep">T/U To Keep</option><option value="T/U To Return">T/U To Return</option><option value="Partial T/U To Keep">Partial T/U To Keep</option><option value="Partial T/U to Rtn">Partial T/U to Rtn</option></select></td><td><input class="somma type="text" name="leasenumber' + counter + '" style="border-width:0px;border:none;"/></td><td><input class="somma type="text" name="assett' + counter + '"/></td><td><input type="text" nae="comments' + counter + '"/></td><td><input class="somma type="text" name="amount' + counter + '" /></td></tr></table></div>');




    counter++;;
    $(".somma").each(function() {
            $(this).keyup(function(){
                calculateSum();
            });
        });
  });
    $("#removeButton").click(function () {
  //alert('Stai per rimuovere una linea di contenuto alla fattura');
  if(counter==2){
          alert("Error");
          return false;
       }   
  counter--;
        $.when($("#linea" + counter).remove()).then(function(){
            calculateSum();
        });
     });
    
  });
/////////////////////////////////////////


///////////////////////////////////FUNCTION ADD VELUES
  $(document).ready(function(){           
      $(".somma").each(function() {
            $(this).keyup(function(){
                calculateSum();
            });
        });
  });
    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".somma").each(function() {
 
            //add only if the value is number
           ...