ajax怎么不确定个append添加上去的信息封装起来

ajax怎么不确定个append添加上去的信息封装起来.
在html页面中放一个添加按钮,用户点击一下添加按钮,就出现一个添加信息的框,用户在框里输入要添加的信息,他出来新的框的html代码是用jquery的append方法做的。不确定用户会添加多少条信息,怎么在ajax中,将用户添加的所有信息取出来封装成一个对象?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 750px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <button onclick="add()">添加</button>
    <button onclick="submit()">提交</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      var num = 0; //用来标识添加的为第几个input
      function add() {
        $("#container").append(`<input class="input${num}" type="text">`);
        num++;
      }
      function submit() {
        var result = [];
        for (let index = 0; index < num; index++) {
          result.push($(`.input${index}`).val());
        }
        console.log("获取到的所有的input值", result);
      }
    </script>
  </body>
</html>

说实话有些混乱,你是想把用户多次提交请求的内容汇总到一起还是想汇总一起后再提交