element does not send information inside a nested table

Question

ejs for table

      <table>
        <tbody>
          <tr>
      <%for (let i = 0; i < 2; i++) {%>
        <form action="/test" method="post">
            <table class="table" id="table<%=i%>">
              <tbody>
                <%for (let j = 0; j < 2; j++) {%>
              <tr>
                 <td>
                    <select class="form-control" name="list[]">
                       <option value="a">a</option>
                       <option value="b">b</option>
                    </select>
                  </td>
                  <td>
                    <input class="form-control" name="listValue[]" type="number" step = "any" value = 0>
                  </td>
                </tr>
                <%}%>
              </table>
                <tr>
                  <td>
                      <button type='button' class="btn btn-lg" onclick="test('table<%=i%>')">Add Row</button>          
                  </td>
                  <td>
                      <button type='submit' class="btn btn-lg">Save</button>
                  </td>
                </tr>
            </form>
            <%}%>
            </tr>
            </tbody>
            </table>

javascript for creating a new row

               function test(tableId) {
                  console.log(tableId)
                  var table = document.getElementById(tableId);
                  var rowCount = table.rows.length;
                  var cellCount = table.rows[0].cells.length; 
                  var row = table.insertRow(rowCount);
                      var cell = row.insertCell(0);
                          cell.innerHTML = '<select class="form-control" name="list[]">'
                            + '<option value="a">a</option>'
                            + '<option value="b">b</option>'
                            + '</select>'
                      cell = row.insertCell(1);
                          cell.innerHTML = '<input class="form-control" name="listValue[]" type="number" step = "any" value = 0>'
                      }

nodejs

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const bodyParser = require('body-parser');
const open = require('open');
const fs = require('fs');
const prompt = require('prompt-async')
require('dotenv').config();
let cors = require("cors");

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }))
app.use(express.json())
app.engine('html', require('ejs').renderFile)
app.set('view engine', 'ejs')

//test
app.post("/test", async (req, res) => {
    console.log(req.body)
    return res.redirect('/test')
})

app.get('/test', (req, res) => {
    res.render('test')
})

If a new row hasn't been added, the data is correct. Once a new row is added, the newly added row's value does not display.

if row 1 selector = a , input = 1

row 2 selector = b, input = 2

the output will be { list: [ 'a', 'b' ], listValue: [ '1', '2' ] } which is correct

if row 1 selector = a , input = 1

row 2 selector = b, input = 2

row 3 selector = a, input = 3 //new row

the output will still be { list: [ 'a', 'b' ], listValue: [ '1', '2' ] }

the expected output is { list: [ 'a', 'b', 'a'], listValue: [ '1', '2', '3' ] }

Once I remove the nested table, everything works fine but is there a way to make the form element save inside the nested table.

code that outputs correct value with no nested table

removed outside <table> <tbody> <tr>

<%for (let i = 0; i < 2; i++) {%>
  <form action="/test" method="post">
      <table class="table" id="table<%=i%>">
        <tbody>
          <%for (let j = 0; j < 2; j++) {%>
        <tr>
           <td>
              <select class="form-control" name="list[]">
                 <option value="a">a</option>
                 <option value="b">b</option>
              </select>
            </td>
            <td>
              <input class="form-control" name="listValue[]" type="number" step = "any" value = 0>
            </td>
          </tr>
          <%}%>
        </table>
          <tr>
            <td>
                <button type='button' class="btn btn-lg" onclick="test('table<%=i%>')">Add Row</button>          
            </td>
            <td>
                <button type='submit' class="btn btn-lg">Save</button>
            </td>
          </tr>
      </form>
      <%}%>