Столбец суммы в динамической таблице

function calc() {
    var td = document.querySelectorAll('#item_table > tr > td:last-child');
    
    var stotal = [].reduce.call(td, function(a, b) {
        return a + parseInt(b.innerText);
    }, 0);
    
    document.getElementById('sub_total').innerText = stotal;
}

$(document).on('click', '.add', function(){
      var html = '';
      html += '<tr>';
      html += '<td><input type = "number" min = "0" value = "0" name = "item_name[]" oninput = "calc();calcSub()" class = "form-control item_name" size = "16" /></td>';
      html += '<td><input type = "number" min = "0" value = "0" name = "item_quantity[]" oninput = "calc()" class = "form-control item_quantity" /></td>';
      html += '<td><input type = "number" min = "0" value = "0" name = "item_unit[]" oninput = "calc()" class = "form-control item_unit" /></td>';
      //NEW ONES!!!!!!!!!!!!!!!
      html += '<td><select name = "item_glass[]" oninput = "calc()" class = "form-control item_glass"><option>Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
      html += '<td><select name = "item_splash[]" oninput = "calc()" class = "form-control item_splash"><option value = "0">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';
      html += '<td><input type = "text" value = "-" name = "item_colour[]" oninput = "calc()" class = "form-control item_colour" /></td>';
    
      html += '<td><input type = "number" min = "0" value = "0" oninput = "calc()" name = "item_HQuan[]" class = "form-control item_HQuan" /></td>';
      html += '<td><select name = "item_HDiam[]" oninput = "calc()" class = "form-control item_HDiam"><option value = "0">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
      html += '<td><input type = "number" min = "0" value = "0" oninput = "calc()" name = "item_CQuan[]" class = "form-control item_CQuan" /></td>';
    
      //Total
      html += '<td><input type = "text" value = "0.0" name = "item_Total[]" id = "item_Total[]" class = "form-control item_Total" disabled/></td>';
    
    
      html += '<td><button type = "button" name = "remove" class = "btn btn-danger btn-sm remove">Delete Item<span class = "glyphicon glyphicon-minus"></span></button></td></tr>';
      $('#item_table').append(html);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class = "table table-bordered" id = "item_table">
      <tr id = "titles">
       <th>Quantity</th>
       <th>Width</th>
       <th>Height</th>
       <th>Glass Type</th>
       <th>Sparkle or Glaze</th>
       <th>Colour Code</th>
       <th>Hole Quantity</th>
       <th>Hole Diameter</th>
       <th>Cut-out Quantity</th>
       <th>Item cost £ (excl. Vat)</th>
    
    
       <th><button type = "button" name = "add" class = "btn btn-success btn-sm add"><span class = "glyphicon glyphicon-plus"></span>Add Item</button></th>
      </tr>
     </table>

 <div class = "form-group">
  <label for = "job_ref">Sub Total</label>
  <input type = "text" id = "sub_total"  class = "form-control sub_total" name = "sub_total" placeholder = "0" value = "0" readonly/>
 </div>