JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table id="batchTable" class="order-list">
  <thead>
    <tr>
      <td>
        <h4>Product</h4>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <h4>Codes</h4>
      </td>
    </tr>
    <tr>
      <td>
        <h4>Label1</h4>
      </td>
      <td>
        <h4>Label2</h4>
      </td>
      <td>
        <h4>Label3</h4>
      </td>
      <td>
        <h4>Label4</h4>
      </td>
      <td>
        <h4>Label5</h4>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="group">
          <input type="text" name="BatchProducts[0].BatchName" id="BatchProducts[0].BatchName" required />
        </div>
      </td>
      <td>
        <div class="group">
          <input type="text" name="BatchProducts[0].BatchPO" id="BatchProducts[0].BatchPO" required />
        </div>
      </td>
      <td>
        <div class="group">
          <input type="text" class="datepicker" name="BatchProducts[0].MadeDate" id="BatchProducts[0].MadeDate" required />
        </div>
      </td>
      <td>
        <div class="group">
          <input type="text" class="monthPicker" name="BatchProducts[0].ValidateDate" id="BatchProducts[0].ValidateDate" required />
        </div>
      </td>
      <td>
        <div class="group">
          <input type="text" class="quantity" name="BatchProducts[0].Quantity" id="BatchProducts[0].Quantity" onkeydown='return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46' required />
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">
        <table class="buttonsTable">
          <tr>
            <td style="text-align: left;">
              <input type="button" id="addrow" value="Añadir lote" />
            </td>
            <td>
              <input type="button" class="ibtnDel"  value="Borrar último lote">
            </td>
          </tr>
  ...

JavaScript

jQuery(document).ready(function ($) {
    var counter = 1;

    $("#addrow").on("click", function() {

      var newRow = $("<tr>");
      var cols = "";

      var batchName = 'BatchProducts[0].BatchName'.replace(/\[.{1}\]/, '[' + counter + ']');
      var batchPO = 'BatchProducts[0].BatchPO'.replace(/\[.{1}\]/, '[' + counter + ']');
      var madeDate = 'BatchProducts[0].MadeDate'.replace(/\[.{1}\]/, '[' + counter + ']');
      var validateDate = 'BatchProducts[0].ValidateDate'.replace(/\[.{1}\]/, '[' + counter + ']');
      var quantity = 'BatchProducts[0].Quantity'.replace(/\[.{1}\]/, '[' + counter + ']');

      cols += '<td><div class="group"><input type="text" name="' + batchName + '" id="' + batchName + '"required /></div></td>';
      cols += '<td><div class="group"><input type="text" name="' + batchPO + '" id="' + batchPO + '" required /></div></td>';
      cols += '<td><div class="group"><input type="text" name="' + madeDate + '" id="' + madeDate + '" required class="datepicker" /></div></td>';
      cols += '<td><div class="group"><input type="text" name="' + validateDate + '" id="' + validateDate + '" required class="datepicker" /></div></td>';
      cols += '<td><div class="group"><input type="text" name="' + quantity + '" id="' + quantity + '" class="quantity" required onkeydown="return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46" /></div></td>';

      newRow.append(cols);

      $("table.order-list").append(newRow);
      counter++;
    });

    $("table.order-list").on("click", ".ibtnDel", function(event) {
      if ($('table.order-list > tbody > tr').length > 0) {
          $('table.order-list > tbody > tr:last').remove();
      }

      counter -= 1
      $('#addrow').attr('disabled', false).prop('value', "Añadir otro lote");
    });

    $('#btnSubmit').click(function(e) { //use on if jQuery 1.7+
      e.preventDefault();

      var totalCodesUsed = 0;
     ...