When dynamically creating or deleting table rows with javascript, the index of the table rows should be updated.
The same applies to input fields within the table rows.
I put together an example of how it could be done in javascript.
Maybe it will help one or the other.
https://codepen.io/Giesenhausener/pen/wBwpEoL
https://jsfiddle.net/Giesenhausener/ekc7zr5s/7/
https://github.com/Giesenhausener/Dynamic-Tables
Example:
Initial Table
<table id="ingredientsTable">
<tbody id="ingredientsTableBody">
<tr id="ingredientRow_0" class="inputRow">
<td><div class="input text"><input type="text" name="ingredients[0][_joinData][amount_name]" list="amounts-datalist_0" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-0-joindata-amount-name" aria-label="Menge..."></div>
<datalist id="amounts-datalist_0"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[0][_joinData][measurement_name]" list="measurements-datalist_0" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-0-joindata-measurement-name" aria-label="Maßeinheit..."></div>
<datalist id="measurements-datalist_0"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[0][name]" list="ingredients-datalist_0" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-0-name" aria-label="Zutat..." maxlength="255"></div>
<datalist id="ingredients-datalist_0"></datalist>
</td>
<td class="actions">
<button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
<button onclick="deleteCurrentRow(this)">delete</button>
<button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
</td>
</tr>
</tbody>
</table>
Table after inserting two more rows and rebuilding the index
<table id="ingredientsTable">
<tbody id="ingredientsTableBody">
<tr id="ingredientRow_0" class="inputRow">
<td><div class="input text"><input type="text" name="ingredients[0][_joinData][amount_name]" list="amounts-datalist_0" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-0-joindata-amount-name" aria-label="Menge..."></div>
<datalist id="amounts-datalist_0"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[0][_joinData][measurement_name]" list="measurements-datalist_0" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-0-joindata-measurement-name" aria-label="Maßeinheit..."></div>
<datalist id="measurements-datalist_0"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[0][name]" list="ingredients-datalist_0" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-0-name" aria-label="Zutat..." maxlength="255"></div>
<datalist id="ingredients-datalist_0"></datalist>
</td>
<td class="actions">
<button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
<button onclick="deleteCurrentRow(this)">delete</button>
<button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
</td>
</tr><tr id="ingredientRow_1" class="inputRow">
<td><div class="input text"><input type="text" name="ingredients[1][_joinData][amount_name]" list="amounts-datalist_1" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-1-joindata-amount-name" aria-label="Menge..."></div>
<datalist id="amounts-datalist_1"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[1][_joinData][measurement_name]" list="measurements-datalist_1" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-1-joindata-measurement-name" aria-label="Maßeinheit..."></div>
<datalist id="measurements-datalist_1"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[1][name]" list="ingredients-datalist_1" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-1-name" aria-label="Zutat..." maxlength="255"></div>
<datalist id="ingredients-datalist_1"></datalist>
</td>
<td class="actions">
<button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
<button onclick="deleteCurrentRow(this)">delete</button>
<button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
</td>
</tr><tr id="ingredientRow_2" class="inputRow">
<td><div class="input text"><input type="text" name="ingredients[2][_joinData][amount_name]" list="amounts-datalist_2" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-2-joindata-amount-name" aria-label="Menge..."></div>
<datalist id="amounts-datalist_2"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[2][_joinData][measurement_name]" list="measurements-datalist_2" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-2-joindata-measurement-name" aria-label="Maßeinheit..."></div>
<datalist id="measurements-datalist_2"></datalist>
</td>
<td><div class="input text"><input type="text" name="ingredients[2][name]" list="ingredients-datalist_2" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-2-name" aria-label="Zutat..." maxlength="255"></div>
<datalist id="ingredients-datalist_2"></datalist>
</td>
<td class="actions">
<button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
<button onclick="deleteCurrentRow(this)">delete</button>
<button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
</td>
</tr>
</tbody>
</table>