JSFiddle - React, Tailwind, and code Playground

HTML

<form id="my_form">
<table class="dynatable">
        <thead>
            <tr class="Header">
                <th id="AddRowTh"><button class="add">Add Row</button></th>
                <th>ID &nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th>
                <th>Name&nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th>
                <th>Address&nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th>
                <th>Contact&nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th>
                <th id="AddColumnTh"><button style="width: 100px; height: 25px" class="addColumn">Add Column</button></th>
            </tr>
        </thead>
        <tbody>
            <tr class="prototype">
                <td><p class="RowName"></p><a href="#" class="RemoveRow">Remove</a><!--<button class="remove">Remove</button>--></td>
                <td><input type="text" name="id[0]" value="1" class="id" /></td>
                <td><input type="text" name="name[0]" value="Billy" /></td>
                <td><input type="text" name="col4[0]" value="Home" /></td>
                <td><input type="text" name="col3[0]" value="Phone" /></td>
            </tr>
            <tr class="prototype">
                <td><p class="RowName"></p><a href="#" class="RemoveRow">Remove</a><!--<button class="remove">Remove</button>--></td>
                <td><input type="text" name="id[1]" value="2" class="id" /></td>
                <td><input type="text" name="name[1]" value="Bob" /></td>
                <td><input type="text" name="col4[1]" value="work" /></td>
                <td><input type="text" name="col3[1]" value="Cell" /></td>
            </tr>
    </tbody>
    </table>
</form>
<button id="convert-table" type="button">Convert!</button>

JavaScript

$('#convert-table').click( function() {
  var table = $('#my_form').serializeArray();
  console.log(table);
  alert(JSON.stringify(table));  
});