Dynamic Input Total Calc

by Shan95r

HTML

<input type="button" id="addButton" value=" Add Row " />

<table id="TextBoxesGroup">
  <tr>
    <td><input id="itemcode1" placeholder="Item Code 1" class="itmcode" /></td>
    <td><input id="itemname1" placeholder="Item Name 1" /></td>
    <td><input id="itemdesc1" placeholder="Item Description 1" /></td>
    <td><input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" /></td>
    <td><input id="itemqty1" placeholder="Item Qty 1" class="itmqty" /></td>
    <td><input id="total1" placeholder="Item Total 1" class="total" /></td>
  </tr>
</table>

<table>
  <tr>
    <td> Running Total </td>
    <td> <input name="running_total" id="running_total" /></td>
  </tr>
</table>

JavaScript

$(document).ready(function() {
  var counter = 2;

  $("#addButton").click(function() {

    if (counter > 10) {
      alert("Only 10 textboxes allowed");
      return false;
    }

    var newTextBoxDiv = $(document.createElement('tr'))
      .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total' + counter + '" id="total' + counter + '" class="total" /></td>');

    newTextBoxDiv.appendTo("#TextBoxesGroup");

    counter++;
  });

  $(document).on('keyup', '.itmqty', function(ev) {
    // grab ID to get row number
    thisID = $(this).attr("id");
    rowNum = thisID.slice(-1);

    //get Amount entered
    amt = $('#itemamnt' + rowNum).val();
    //get QTY
    qty = $('#itemqty' + rowNum).val();
    $('#total' + rowNum).val(amt * qty);

    currentCount = counter - 1;
    var tot = 0;
    $('.total').each(function() {
      tot += parseFloat($(this).val());
    });

    $('#running_total').val(tot);
  });

  //$('#total').val($('#itm-qty').val() * $('#itm-amnt').val());
});