Javascript jquery ui滑块不工作的动态输入字段

我正在尝试使用jquery up slider创建一个动态输入字段，但该滑块仅适用于第一个字段，而不适用于动态字段。这是你的电话号码

$（窗口）.load（函数（）{
$（“#滑块范围”）。滑块({
分:0,，
最高：100，
值：[0]，
幻灯片：功能（事件、用户界面）{
$（“#任务#状态”）.val（ui.values[0]）；
}
});
$（“#任务#状态”）。更改（函数（）{
$（“#滑块范围”）.slider（'values'，0，$（this.val（））；
});						
//创建动态表单
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）
追加
（'X'）；
});  
$（文档）.on（'click'，'.btn_remove'，function（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
});
.container{
边缘顶部：60像素；
}
.表td.表th{
填充：.1rem；
垂直对齐：顶部；
边框顶部：1px实心#dee2e6；
}

项目任务
添加
试试这个：不要多次使用同一个id。将
滑块范围
替换为类而不是id，并在html中使用相同的id以及附加代码。另外，您需要在每个新创建的元素上应用滑块，因此在追加新行后调用相同的函数

注意用类名或动态id替换所有重复id


$（窗口）.load（函数（）{
$（“#滑块范围”）。滑块({
分:0,，
最高：100，
值：[0]，
幻灯片：功能（事件、用户界面）{
$（“#任务#状态”）.val（ui.values[0]）；
}
});
$（文档）.on（“更改”，“输入[id^=tasks\u status]”，函数（）{
var$parent=$（this）.closest（'tr'）；
$parent.find（“div[id^=滑块范围]”）.slider（'values'，0，$（this.val（））；
});						
//创建动态表单
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）
追加
（'X'）；
var sliderId=“#滑块范围”+i；
var statusId=“#任务_状态”+i；
$（sliderId）.滑块({
分:0,，
最高：100，
值：[0]，
幻灯片：功能（事件、用户界面）{
$（statusId）.val（ui.values[0]）；
}
}); 
});  
$（文档）.on（'click'，'.btn_remove'，function（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
});
.container{
边缘顶部：60像素；
}
.表td.表th{
填充：.1rem；
垂直对齐：顶部；
边框顶部：1px实心#dee2e6；
}

项目任务
添加
谢谢您的回答，但当更改滑块时，只会更改字段，其他字段不起作用。例如，如果我移动第二个滑块，它会更改第一个输入字段上的值，这是因为重复id
任务\ u状态
，我已使用
i
更新代码以动态放置它。请立即查看更新的代码，我很乐意帮助您。我已经更新了我的帖子，只通过使用变量
I