Javascript 更改多个下拉项及其输入

我正在尝试创建一个查询生成器，我有一个简单的下拉列表，当添加该列表时，将创建一个输入文本或另一个下拉列表，如下图所示（通过剪切代码的相关部分简化）：

在第一个添加的表行中，我可以以各种方式操作框，但是当我添加第二个框时，它不会改变。我在js方面没有太多经验，但我知道我将更改事件放在了.add函数中，但是我找不到任何其他方法使其工作，即使是这种错误的方法。 你知道我在这里遗漏了什么吗

代码如下：

$（文档）.ready（函数（）
{
var main_search_type='摘要_结果'；
var计数=0；
var和_或_计数=0；
$（文档）.on（'click'，'add'，函数（）
{
$（函数（）
{
$（“#选项”）.change（函数（）
{
console.log（$（this.find（“：selected”）.val（））
if（$（this）.find（“：selected”）.data（“rate”）！=“Duplicated”）
{
$（“#项目id”）。替换为
(
''
);
$（“#item_id”）.attr（“占位符”，$（this.find（“：selected”）.data（“速率”）；
}
其他的
{
$（“#项目id”）。替换为
(
'' +
“真的”+
“假”
);
}
});
});
var html=''；
如果（主搜索类型=“摘要结果”）
{
html+=''；
html+=
'' +
“门”+
“属”+“生物体”
''
计数++；
}
如果（计数！=0）
{
html+=''；
html+=''；
$（'tbody'）.append（html）；
}
});
});



选择主要类别
搜索选项
输入搜索词
添加术语
您不能有重复的ID。因此，我建议使用重复的id（即：options和item_id）作为类名

此外，不要在单击文档时添加和事件列表器。而是使用委托格式

片段：


var main_search_type='summary_results'；
var计数=0；
var和_或_计数=0；
$（文档）.on（'click'，'add'，函数（）{
var html=''；
如果（主搜索类型=“摘要结果”）{
html+=''；
html+=
'' +
“门”+
“属”+“生物体”
''
计数++；
}
如果（计数！=0）{
html+=''；
html+=''；
$（'tbody'）.append（html）；
}
});
$（document）.on（'change'，'select.options'，function（）{
console.log（$（this.find（“：selected”）.val（））
if（$（this）.find（“：selected”）.data（“rate”）！=“Duplicated”）{
$（this）.closest（'td'）.next（）.find（'.item_id'）.replaceWith(
''
);
$（this）.closest（'td'）.next（）.find（'.item_id'）.attr（“占位符”），$（this.find（“：selected”）.data（“速率”）；
}否则{
$（this）.closest（'td'）.next（）.find（'.item_id'）.replaceWith(
'' +
“真的”+
“假”
);
}
});



选择主要类别
搜索选项
输入搜索词
添加术语
您希望实现什么？如果单击“添加术语”，并从下拉列表中选择不同的选项，文本框部分将发生更改。如果我再次添加另一个术语，那么当我选择不同的选项时，文本框不会改变，我希望它和第一个添加的术语一样改变。啊，我认为我需要学习更多的授权格式。从网络上的这段或那段代码中学到的不好的东西到此为止：）。谢谢你的回答，顺便说一句，工作很有魅力。