jQuery点击Add More按钮获取动态表单ID并向对应select追加选项

你的代码不生效有三个核心问题：

• HTML标准规定id属性在整个页面必须唯一，你动态生成多份表单后会出现大量重复id（plus5、location等），本身就不符合规范，选择器匹配会出现异常
• 你写的closest('#dynamic_form')只会严格匹配id完全等于dynamic_form的元素，后缀带0、1的dynamic_form0、dynamic_form1根本匹配不到；同时初始的事件绑定只给第一个#dynamic_form里的按钮绑了事件，后续动态生成的表单里的Add More按钮点击根本不会触发绑定的函数
• 你不需要特意提取表单id再拼location的id，直接在当前表单的DOM范围内查找对应元素即可，逻辑更简单不容易出错

不要靠id后缀匹配元素，给重复生成的动态元素加公共类名，用类名做选择器，从根源避免id重复问题：

1. 调整动态表单模板，给公共元素加统一类名：

<div class="form-group dynamic-form" id="dynamic_form">
  <div class="row">
    <div class="col-md-3">
      <!-- 给location下拉加公共类 -->
      <select name="location" class="form-control location-select" placeholder="Enter Product Name"></select>
    </div>
    <div class="col-md-3">
      <input type="text" class="form-control" name="quantity" placeholder="Enter Product Quantity" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
    </div>
    <div class="col-md-4">
      <textarea class="form-control" rows="1" name="remarks" placeholder="Enter Remarks"></textarea>
    </div>
    <div class="button-group">
      <!-- 按钮用公共类，不要生成重复id -->
      <a href="javascript:void(0)" class="btn btn-primary btn-add">Add More</a>
      <a href="javascript:void(0)" class="btn btn-danger btn-remove">Remove</a>
    </div>
  </div>
</div>

2. 用事件委托绑定点击事件，支持后续动态生成的表单元素，点击时直接在当前表单范围内查找目标下拉框：

// 事件委托绑定到页面初始化时就存在的静态父元素，这里直接用document即可
$(document).on('click', '.btn-add', function() {
  // 找到按钮所属的最近一层动态表单容器
  const $currentForm = $(this).closest('.dynamic-form');
  // 仅在当前表单范围内查找location下拉框，不会误选其他表单的元素
  const $location = $currentForm.find('.location-select');
  
  // 在这里写追加选项的逻辑即可，示例：
  $location.append('<option value="test">测试选项</option>');
});

如果你暂时不想调整现有模板的id命名，也可以用属性前缀选择器匹配元素，不用改HTML：

// 匹配所有id以plus5开头的按钮
$(document).on('click', '[id^="plus5"]', function() {
  // 找最近的id以dynamic_form开头的祖先表单
  const $currentForm = $(this).closest('[id^="dynamic_form"]');
  // 提取表单id的数字后缀
  const suffix = $currentForm.attr('id').replace('dynamic_form', '');
  // 拼接对应location的id选中元素
  const $location = $(`#location${suffix}`);
  
  // 追加选项逻辑
});

注意：这个方案因为依赖重复id，不符合HTML规范，长期维护容易出现冲突问题，优先推荐用类名的实现方式。

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