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 <a href="#" class="RemoveColumn">Remove</a></th>
<th>Name <a href="#" class="RemoveColumn">Remove</a></th>
<th>Address <a href="#" class="RemoveColumn">Remove</a></th>
<th>Contact <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();
var final_results = [];
var row_patt = /\[(\d+)\]$/; // Gets the row number inside []
var name_patt = /^[^\[]+/; // Gets the name without the [0]
$(table).each( function(index, ele){
// Get the name of input and row number
var rowNum = parseInt(row_patt.exec(ele.name)[1]);
var name = name_patt.exec(ele.name);
// Add the name and value to the correct spot in results
if( final_results[rowNum] === undefined ){
final_results[rowNum] = {};
}
final_results[rowNum][name] = ele.value;
});
console.log(final_results);
alert(JSON.stringify(final_results));
});