JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table id="applyList" border="1">
  <thead>
    <tr>
      <th>#</th>
      <th>Route</th>
      <th>Fare [MMK]</th>
      <th>Remark</th>
      <th></th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>
      <select>
        <option value="1">Home->Office->Home</option>
        <option>Custom
      </select>
    </td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td>
      <button class="addButton">[+]</button>
      <button class="deleteButton">[-]</button>
    </td>
  </tr>
</table>

JavaScript

function createRow(id) {
  var newrow = [
    id,
    '<select><option value="1">Home->Office->Home</option></select>',
    '<input type="text" class="width-50"/>',
    '<input type="text" />',
    '<img class="addButton width-30 height-30 align-middle" src="../../public/img/busfare/plus.png"/><img class="deleteButton width-30 height-30 align-middle" src="../../public/img/busfare/minus.png"/>'
  ];

  return '<tr><td>' + newrow.join('</td><td>') + '</td></tr>';
}

function renumberRows() {
  $('table#applyList tbody tr').each(function(index) {
    $(this).children('td:first').text(index + 1);
  });
}

$('button#add').click(function() {
  var lastvalue = 1 + parseInt($('table#applyList tbody').children('tr:last').children('td:first').text());
  $('table#applyList tbody').append(createRow(lastvalue));
});

$('table#applyList').on('click', '.addButton', function() {
  $(this).closest('tr').after(createRow(0));
  renumberRows();
}).on('click', '.deleteButton', function() {
  $(this).closest('tr').remove();
  renumberRows();
});