如何为循环动态生成的文本框分配唯一ID并对应到各尺寸区块？

我明白你现在遇到的困扰了——你的jQuery脚本把所有8个输入框都塞进了第一个尺寸区块的#addition容器里，这是因为HTML中ID必须是唯一的，jQuery的$('#addition')只会匹配到页面中第一个带有该ID的元素，自然所有输入框都堆在了第一个区块里。

其实根本不需要用JS来动态生成这些输入框，直接在PHP的循环里就能生成带唯一ID的输入框，而且更简单可靠。下面是具体的解决方案：

方案一：服务器端（PHP）直接生成带唯一ID的输入框 #

这是最推荐的方式，因为服务器端渲染更高效，也避免了客户端JS的延迟问题。

修改后的PHP代码 #

<?php
// 获取上一页扫描的数组数据
$strings = explode(PHP_EOL,($_SESSION['grid']));
$sa = [];
foreach ($strings as $s) {
  array_push($sa, "'" . $s . "'");
}
$d=implode(',', $sa);
// SQL查询
$sql = "select distinct size from items where main_group IN(select distinct main_group from items where addl_item_code_barcode IN ($d)) ORDER BY size";
$result = pg_query($db, $sql);

// 初始化计数器，用来生成唯一ID（从1开始对应add1到add8）
$inputCounter = 1;
?>

<div class="row">
  <!-- 循环生成每个尺寸区块 -->
  <?php while($res = pg_fetch_assoc($result)){ ?>
  <div class="col-md-2 show-hide">
    <input type="text" value="<?php echo $res['size']; ?> " readonly style="background-color: #F5F5F5;" class="form-control"/>
    <!-- 直接在这里生成带唯一ID的输入框 -->
    <input class="form-control sync-input" type="text" name="add<?php echo $inputCounter; ?>" id="add<?php echo $inputCounter; ?>" />
    <select class="form-control">
      <option>25%</option>
      <option>50%</option>
      <option>100%</option>
    </select><br>
  </div>
  <?php
  // 每次循环计数器+1，保证ID唯一
  $inputCounter++;
  }
  ?>
</div>
<br>
<br>
<button type="submit" value="submit" class="btn btn-primary"><i class="fas fa-paint-brush"></i>Apply</button>
</form>

优化同步脚本（避免硬编码ID） #

原来的sync函数需要逐个写死ID，非常不灵活。可以用类选择器批量处理所有需要同步的输入框：

function sync() {
  // 获取主输入框的值
  const mainValue = document.getElementById('add0').value;
  // 选择所有带有sync-input类的输入框（也就是循环生成的那些）
  const syncInputs = document.querySelectorAll('.sync-input');
  // 批量设置值
  syncInputs.forEach(input => {
    input.value = mainValue;
  });
}

方案二：如果一定要用客户端JS生成输入框 #

如果你坚持要用JS动态生成，那需要把重复的ID改成类，然后遍历每个容器逐个添加输入框：

修改HTML结构（把ID改成类） #

在PHP循环里把<div id="addition"></div>改成：

<div class="addition"></div>

修改JS脚本 #

$(document).ready(function() {
  // 遍历所有带有addition类的容器
  $('.addition').each(function(index) {
    // index从0开始，所以ID用index+1来对应add1到add8
    const inputId = 'add' + (index + 1);
    // 给当前容器添加输入框
    $(this).append(`<input class="form-control sync-input" type="text" name="${inputId}" id="${inputId}" />`);
  });
});

同样搭配上面优化后的sync函数即可。

为什么原来的方法失效？ #

• HTML规范要求ID必须唯一，你的循环生成了8个<div id="addition"></div>，这本身就不符合规范。
• jQuery的$('#addition')只会匹配页面中第一个带有该ID的元素，所以所有输入框都被插入到了第一个尺寸区块里。

内容的提问来源于stack exchange，提问作者Cooper