I am implementing a function to add a table row when a button is clicked.

Below is the table.

<table id="table">
    <tr>
        <td>num</td>
        <td>name</td>
        <td>procedure</td>
        <td>expect</td>
    </tr>
    <tr>
        <td><h4></h4></td>
        <td><input type="text" name="testCaseName" id="testCaseName"></td>
        <td><textarea name="testProcedure" id="testProcedure" onkeydown="resize(this)" onkeyup="resize(this)"></textarea></td>
        <td><input type="text" name="expect" id="expect"></td>
    </tr>
    <tr>
        <td>
            <input type="button" value="addRow" onclick="addRow()"></input>
            <input type="submit" value="submit">
        </td>
    </tr>
</table>

Below is the add row function.

function addRow() {
    var table = document.getElementById("table");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "<h4></h4>";
    cell2.innerHTML = "<input type='text' name='testCaseName' id='testCaseName'>";
    cell3.innerHTML = "<textarea name='testProcedure' id='testProcedure' onkeydown='resize(this)' onkeyup='resize(this)'></textarea>";
    cell4.innerHTML = "<input type='text' name='expect' id='expect'>";
}

If you do this the problem

It is very natural, but when it is saved in the database after submitting, it is all saved in one row.

I want to add one row to the database for each row added, but please advise on how to do it.