title: Create dynamic form that does calculations of input boxes
body: <p>This is my first question on here so go easy and apologies if this has been asked before but i could find no mention of it.</p>
  
  <p>I am creating a purchase order system for the company i work for using PHP, MSSQL and a little JS/JQuery. I have a small form that i have created and although i cannot get it working on the JSFiddle it works in my environment, the problem i have is when i am trying to calculate the Quantity * Unit Cost + Delivery. This works on the first row but not on the dynamic rows i add after.</p>
  
  <p>I can see why this is as there is no unique identifier for the input boxes, I have minimal knowledge of JS and JQuery so i am stuck in a rut here. Could anybody please point me in the right direction.</p>
  
  <p>Many thanks in advance</p>
  
  <p><a href="http://jsfiddle.net/oczqkbpd/" rel="nofollow">JSFiddle of what i have so far</a></p>
  
  <pre><code>&lt;div class="panel-body"&gt;
      &lt;p&gt; 
          &lt;input type="button" class="btn btn-primary" value="Add Line" onclick="addRow('dataTable')"&gt; 
          &lt;input type="button" class="btn btn-danger" value="Remove Line" onclick="deleteRow('dataTable')"&gt; 
      &lt;/p&gt;
      &lt;table width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th width="2%"&gt;&lt;/th&gt;
                  &lt;th width="8%"&gt;Part Number&lt;/th&gt;
                  &lt;th width="20%"&gt;Description&lt;/th&gt;
                  &lt;th width="8%"&gt;Quantity&lt;/th&gt;
                  &lt;th width="15%"&gt;Delivery&lt;/th&gt;
                  &lt;th width="15%"&gt;Unit Cost&lt;/th&gt;
                  &lt;th width="15%"&gt;Total Cost&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
      &lt;table id="dataTable" width="100%" border="0"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td width="2%"&gt;&lt;input type="checkbox" name="chk[]"&gt;&lt;/td&gt;
              &lt;td width="8%"&gt;
                  &lt;input type="text" class="form-control" style="width: 90%;" name="partnumber[]"&gt;
               &lt;/td&gt;
               &lt;td width="20%"&gt;
                  &lt;input type="text" class="form-control" style="width: 90%;" required="required" name="description[]"&gt;
               &lt;/td&gt;
               &lt;td width="9%"&gt;
                  &lt;input type="number" class="form-control" style="width: 70%;" step="1" required="required" onblur="return Calculate();" id="quantity" name="quantity[]"&gt;
               &lt;/td&gt;
               &lt;td width="15%"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;
                          &lt;i class="fa fa-gbp"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;input type="number" pattern="^\d+(\.|\,)\d{2}$" class="form-control" onblur="return Calculate();" placeholder="0.00" step="0.01" style="width: 60%;" id="delivery" required="required" name="delivery[]"&gt;
                  &lt;/div&gt;
               &lt;/td&gt;
               &lt;td width="15%"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;
                          &lt;i class="fa fa-gbp"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;input type="number" pattern="^\d+(\.|\,)\d{2}$" class="form-control" onblur="return Calculate();" placeholder="0.00" step="0.01" style="width: 60%;" id="unitcost" required="required" name="unitcost[]"&gt;
                  &lt;/div&gt;
               &lt;/td&gt;
               &lt;td width="15%"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;
                          &lt;i class="fa fa-gbp"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;input type="number" pattern="^\d+(\.|\,)\d{2}$" class="form-control" placeholder="0.00" step="0.01" style="width: 60%;" id="totalcost[]" required="required" name="totalcost" disabled&gt;
                  &lt;/div&gt;
               &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if(rowCount &lt; 20){                          // limit the user from creating fields more than your limits
      var row = table.insertRow(rowCount);
      var colCount = table.rows[0].cells.length;
      for(var i=0; i&lt;colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      }
  }else{
       alert("Maximum number of purchase order rows reached");
  
  }
  }
  
  function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  for(var i=0; i&lt;rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if(null != chkbox &amp;&amp; true == chkbox.checked) {
          if(rowCount &lt;= 1) {                         // limit the user from removing all the fields
              alert("Cannot remove all purchase order lines");
              break;
          }
          table.deleteRow(i);
          rowCount--;
          i--;
      }
  }
  }
  &lt;script&gt;
    function Calculate() {
  
      var quantity = document.getElementById("quantity").value;
      var delivery = document.getElementById("delivery").value;
      var unitcost = document.getElementById("unitcost").value;
      var total = (+quantity * +unitcost) + +delivery;
      document.getElementById("totalcost").value = total.toFixed(2);
    }
  </code></pre>
  
  <p></p>
  
  <p><strong>UPDATE:</strong>
  Brijesh got me on the right track, thanks to Anthony for tip using .on instead of .live. Working code at this JS fiddle
  <a href="http://jsfiddle.net/oczqkbpd/8/" rel="nofollow">http://jsfiddle.net/oczqkbpd/8/</a></p>
  
  <pre><code>$(document).ready(function () {
  $(document).on("change", "input[name^=delivery],input[name^=quantity]", function () {
      $("input[name^=unitcost]").trigger("change");
  });
  $(document).on("change", "input[name^=unitcost]", function () {
      var unitcost = $(this).val() == "" ? 0 : $(this).val();
      var delivery = $(this).closest("td").siblings().find("input[name^=delivery]").val();
      var quantity = $(this).closest("td").siblings().find("input[name^=quantity]").val();
      var total = eval(quantity * unitcost) + Number(delivery);
      $(this).closest("td").siblings().find("input[name^=totalcost]").val(total.toFixed(2));
  });
  });
  </code></pre>