JSFiddle - React, Tailwind, and code Playground

HTML

<div class="formContainer">
  <form action="#" method="post">
    <table id="myTable">
      <thead>
        <tr>
          <th>Delete</th>
          <th>Order</th>
          <th>Amount</th>
          <th>Ingredient</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="td_delete">&nbsp;</td>
          <td class="td_rank"><input type="text" name="rank[]" value="1" class="rank"></td>
          <td class="td_qty"><input type="text" name="qty[]" value="" class="qty"> </td>
          <td class="td_ing"><input type="text"></td>
        </tr>
    </table>
    <input type="button" value="Add Row" id="btnAdd">
  </form>
</div><!-- /formContainer -->

CSS

input#btnAdd {
  position: absolute;
  right: 0px;
}
.formContainer {
  position: relative;
  width: 640px;
}

JavaScript

(function() {
  var id=1,$newRow;
  $getLastId = function() {
    var $id = $("#myTable tr:last-child td.td_rank input.rank").attr("value");
    var $id = parseInt($id) +1;
    $newRow = "<tr>\
          <td class='td_delete'><input type='button' value='Del Row' class='delrow'></td>\
          <td class='td_rank'><input type='text' name='rank[]' value='"+$id+"' class='rank'></td>\
          <td class='td_qty'><input type='text' name='qty[]' value='' class='qty'> </td>\
          <td class='td_ing'><input type='text'></td>\
        </tr>"
    return $newRow;

  }
  $('#btnAdd').click(function(){
    $getLastId();
    $('#myTable').append($newRow);
  });
  $(document).on('click','.delrow',function(){
    var tr = $(this).closest('tr');
    console.log(tr);
      tr.remove();
    var $id = $id-2;
  });
})();