JSFiddle - React, Tailwind, and code Playground

HTML

<form name='foodlist' action='checkout' method='POST'>
  <table>
    <tr>
      <td>Product Name</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Amount</td>
    </tr>
    <tr>
      <td><input type='text' name='foodname[]' size='10' class='foodname' /></td>
      <td><input type='text' name='price[]' size='2' class='price'/></td>
      <td><input type='text' name='qty[]' size='2' class='qty'/></td>
      <td><input type='text' name='amt[]'  size='2' class='amt'/></td>
    </tr>
    <tr>
      <td><input type='text' name='foodname[]' size='10' class='foodname' /></td>
      <td><input type='text' name='price[]' size='2' class='price'/></td>
      <td><input type='text' name='qty[]' size='2' class='qty'/></td>
      <td><input type='text' name='amt[]'  size='2' class='amt'/></td>
    </tr>
  </table>
</form>

JavaScript

var data = $('form').serializeArray();
console.table(data);