jQuery动态添加表单字段时变量未更新 字段pers后缀始终为pers1

核心问题是你在DOM加载完成的初始化阶段就把fieldHTML字符串拼接完了：这行代码执行时window.s的初始值是1，字符串拼接完成后内容就固定成了带pers1的静态文本，后续你修改window.s的值，也不会反向修改已经生成好的字符串内容。你每次点击添加按钮时，append的都是这份一开始就写死的静态HTML，所以不管计数器怎么变，新增字段的name后缀永远是1。

另外你的现有逻辑还有3个隐藏问题：

• 第一个input的type="text3"是无效属性值，标准文本输入框的type应为text
• time输入框的style属性没加引号，会导致样式解析异常
• 删除字段时直接对计数器自减，很容易出现序号断层、重名问题：比如添加到pers3后删掉pers2，计数器会回到2，下次新增的字段name会是pers3，和已存在的第三个字段重名，表单提交时会出现数据覆盖。

不要提前预生成固定的HTML字符串，改为每次点击添加按钮时，基于当前最新的计数器值动态拼接待插入的DOM结构；如果需要保证序号连续，可以在删除字段后自动重排所有pers字段的序号。

修复后的可运行代码：

<script type="text/javascript">
  // 初始页面默认带1个pers字段时初始值设为1，无默认字段则设为0
  let fieldCount = 1;
</script>

<script type="text/javascript">
  $(document).ready(function() {
    const addButton = $('.add_button');
    const wrapper = $('.field_wrapper');
    const maxField = 10;

    $(addButton).click(function() {
      if (fieldCount < maxField) {
        fieldCount++;
        // 每次触发添加时，用最新计数值实时拼接HTML
        const newField = `
        <div style="margin-top:5px;">
          <input type="text" name="pers${fieldCount}" placeholder="Nome e Cognome"/>
          <input type="time" style="margin-left:3.5px;" autocomplete="off">
          <input type="time" style="margin-left:3.5px;" autocomplete="off">
          <a href="javascript:void(0);" class="remove_button" title="Rimuovi">
            <img src="IMG/less_icon.png">
          </a>
        </div>`;
        $(wrapper).append(newField);
      }
    });

    $(wrapper).on('click', '.remove_button', function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      // 重排所有pers字段的序号，避免断层、重名
      $(wrapper).find('input[name^="pers"]').each(function(idx) {
        $(this).attr('name', `pers${idx + 1}`);
      });
      // 同步更新计数器为当前实际存在的pers字段总数
      fieldCount = $(wrapper).find('input[name^="pers"]').length;
    });
  });
</script>

内容的提问来源于stack exchange，提问作者Giovanni De Miccoli