This articles shows you how to create a form of rows (ie in a tabular form) like this one:
The trick is that a form may contain several control element with the same name attribute. In this case, the server will receive an array of values for each name.
<form id="form-of-rows">
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
</tr>
<tr>
<td><input type="number" name="id" value="1" readonly/></td>
<td><input type="text" name="name" value="Foo" /></td>
<td><input type="text" name="description" value="Fool" /></td>
</tr>
<tr>
<td><input type="number" name="id" value="2" readonly/></td>
<td><input type="text" name="name" value="Bar" /></td>
<td><input type="text" name="description" value="Barré" /></td>
</tr>
</table>
</form>
console.log("The data of the form are:");
let formData = new FormData(document.getElementById('form-of-rows'));
// retrieve the entries in a entries variable of iterator type
let entries = formData.entries();
// loop over the iterator
let result = entries.next();
while (!result.done) {
console.log("Input: Name: "+result.value[0]+", value: "+result.value[1]);
result = entries.next();
}