Table add/remove dynamic data.

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

  <body>
    <table id="productTable" class="table table-hover table-bordered">
      <thead>
        <tr>
          <th>No.</th>
          <th>Product</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="mainBody">

      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td>
            Expected Total:<span id="total">0</span>
            <br> Added Total:<span id="totalAdd">0</span>
          </td>
          <td></td>
        </tr>
      </tfoot>
    </table>

    <button type="button" class="add-new btn btn-info" id="add-new">Add New Income</button>

    <!-- https://stackoverflow.com/a/18674066/5081877 -->
    <script id="hidden-template" type="text/x-custom-template">
      <tr id="mainRow">
        <td>${sno}</td>
        <td>
          <select name="selectProduct" id="productOption" class="form-control" selected="${optionVal}">
            <option value="0"> -- Select One --</option>
            <option value="1"> IPhone </option>
            <option value="2"> MAC </option>
            <option value="3"> Windows </option>
          </select>
        </td>
        <td>
          <input id="number_only" pattern="[0-9]" type="text" class="form-control" />
        </td>
        <td>
          <!-- glyphicon-plus | glyphicon-remove -->
          <button type="button" class="add-new btn btn-info glyphicon glyphicon-plus"></button>
        </td>
      </tr>
    </script>
  </body>

CSS

// https://stackoverflow.com/questions/11162556/javascript-onchange-sum-input-after-percentage
// https://stackoverflow.com/questions/46561528/how-to-add-the-multiple-keyup-event-values-in-a-single-field

JavaScript

const dynamic_JS = ({
  sno,
  optionVal,
  price
}) => `<tr><td>${sno}</td>  <td><select name="selectProduct" class="form-control" selected="${optionVal}"><option value="0"> -- Select One --</option><option value="1"> IPhone </option><option value="2"> MAC </option><option value="3"> Windows </option></select></td>  <td><input type="text" class="form-control" value="${price}" title="" ></td>  <td><button type="button" class="remove-row btn btn-info glyphicon glyphicon-remove" ></button></td>  </tr>`;
// onclick=\'removeRow(this)\' 

//window.onload=function(){}
$(document).ready(function() {
  var template_add = $('#hidden-template').text();

  function render(props) {
    return function(tok, i) {
      return (i % 2) ? props[tok] : tok;
    };
  }
  var items = [{
    sno: '1',
    optionVal: '0',
    price: '0'
  }];
  var dynamic_HTML = template_add.split(/\$\{(.+?)\}/g);

  $('tbody').append(items.map(function(item) {
    return dynamic_HTML.map(render(item)).join('');
  }));

});

// https://stackoverflow.com/a/35592412/5081877
$('table#productTable').on('input propertychange',' > tbody > tr > td:nth-child(3) > input', function() {
  $.each($('input[type=text]'), function() {
    this.value = this.value.replace(/[^0-9]/g, '');
  });
});


$('.add-new').on('click', function() {
  $("#productTable").each(function() {

    var tr_last = $('tbody > tr:last', this).clone();
    var td_no = tr_last.find('td:first');
    var serialNumber = parseInt(td_no.text()) + 1;


    // https://stackoverflow.com/a/6588327/5081877
    var tr_first_input = $('tbody > tr:first > td:nth-child(3) > input');
    var tr_first_price = parseFloat(tr_first_input.val()) || 0;
    console.dir(tr_first_price);

    totalamount += tr_first_price;
    $('#totalAdd').text(totalamount);

    var tr_first_selected = $('tbody > tr:first > td:nth-child(2) > select option').filter(":selected");
    // option:selected | .find(":selected") ~ .text(), ~.attr('value');
    var selectedValue =...