如何从输入字段动态获取值

Question

我的网站中有一个页面，其中包含一个包含输入字段的表单，我还有一个按钮可以创建更多输入字段，以防用户需要输入更多内容。现在的问题是，如果用户犯了错误并创建了他/她不需要的输入字段，他可以删除它们，但这会在将输入字段的值插入数据库时​​产生问题。我正在使用 for 循环通过 id 获取输入字段的所有值，例如。 id1、id2、id3 等，但如果用户删除了输入字段之一，例如 id2，我将无法获得 id3，因为 for 循环仍然会从 1 到最后正常运行并且不会跳过 2。

这是创建更多输入字段的代码：

let counter = 1;

document.getElementById("shownew").addEventListener("click", (e) => {
  e.preventDefault();

  // new_section.style.display = "flex";
  new_section.insertAdjacentHTML('beforeend', 
  `   <div class="lowerlayer2" id="close${counter}">
  <button id="delete" onclick="deleteme(${counter})"><i class="fa fa-minus"></i></button>

  <input type="text" placeholder="Word Type" id="wtype${counter}" />
  <input type="text" placeholder="Synonym" id="syn${counter}" />
  <input type="text" placeholder="Antonyms" id="anty${counter}" />

  <textarea
    cols="30"
    rows="10"
    placeholder="History & Etymology"
    id="history${counter}"
  ></textarea>
  <textarea
    cols="30"
    rows="10"
    placeholder="Examples"
    id="example${counter}"
  ></textarea>
  <textarea
    cols="30"
    rows="10"
    placeholder="Definition 1"
    id="def1${counter}"
  ></textarea>
  </div>`
  );
  counter++;
});

这是删除输入字段的代码：

function deleteme(id) {
  document.getElementById(`close${id}`).style.display="none";
  document.getElementById(`close${id}`).innerHTML="";
  counter--
}

这是从输入字段的值中获取值的代码：

document.getElementById("wan").addEventListener("click", (e) => {
  e.preventDefault();
  type = "";
  syn = "";
  anty = "";
  history = "";
  example = "";
  def1 = "";
  for (let i = 0; i < counter; i++) {
    type += document.getElementById(`wtype${i}`).value + "^";
    syn += document.getElementById(`syn${i}`).value + "^";
    anty += document.getElementById(`anty${i}`).value + "^";
    history += document.getElementById(`history${i}`).value + "^";
    example += document.getElementById(`example${i}`).value + "^";
    def1 += document.getElementById(`def1${i}`).value + "^";
  }
  console.log(
    type +
      " . " +
      syn +
      " . " +
      anty +
      " . " +
      history +
      " . " +
      example +
      " . " +
      def1
  );
});