语义化表单替代动态ID，打造可扩展下拉选择器

在前端开发中，为表单动态添加控件时，若过度依赖 id 属性 + 字符串拼接 + 内联 onclick，极易陷入 ID 冲突、作用域丢失、闭包捕获错误值 等经典陷阱——正如你遇到的：counter 显示为 5，但点击所有新下拉项却始终只修改 dropdownButton2。根本原因在于：createDropdownItem 中的 onclick 回调函数形成了闭包，但该闭包引用的是外部变量 buttonId 的最终值（即最后一次循环赋值的结果），而非每次调用时的独立快照；更严重的是，Bootstrap 的 dropdown-toggle 按钮本身并不原生支持“文本回填”，需手动绑定事件，而动态生成的 DOM 节点若未正确关联上下文，就会出现目标错位。

✅ 推荐解法：放弃手动拼接 ID 和内联事件，改用语义化、结构化、无状态的表单设计：

• 使用
  封装每个属性组（Modifier + Name + Value），天然具备逻辑分组语义；
• 用原生 <select> 替代自定义下拉按钮，无需 JS 控制展开/收起，兼容键盘导航与屏幕阅读器；
• 利用 form.elements API 按 name 批量获取字段，避免 ID 查找；
• 通过