Jquery 选择器插件颜色选择器。动态添加输入选择器并按类（而不是按ID）实例化每个选择器

我使用pickr插件：

在一个可以为选择器动态添加多个输入字段的表单中，我不知道如何实例化每个字段。它只对第一个有效。我不能使用ID，只能使用类

插件是用来实例化单个输入的。但是我的表单需要添加N.动态输入（未知数量）

只实例化第一个的JSFIDLE

实际上，我在每次添加新行时调用的函数中插入了以下代码：

var pickr = Pickr.create({
        el: '.picker',
        theme: 'nano', // or 'monolith', or 'nano'
        useAsButton: true,
        comparison: false,
        swatches: [
            'rgb(244, 67, 54)',
            'rgb(233, 30, 99)',
            'rgb(156, 39, 176)',
            'rgb(103, 58, 183)',
            'rgb(63, 81, 181)',
            'rgb(33, 150, 243)',
            'rgb(3, 169, 244)',
            'rgb(0, 188, 212)',
            'rgb(0, 150, 136)',
            'rgb(76, 175, 80)',
            'rgb(139, 195, 74)',
            'rgb(205, 220, 57)',
            'rgb(255, 235, 59)',
            'rgb(255, 193, 7)'
        ],
        defaultRepresentation: 'HEX',
        lockOpacity: true,
        components: {

            // Main components
            preview: true,
            opacity: false,
            hue: true,

            // Input / output Options
            interaction: {
                hex: false,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: true,
                save: true
            }
        },

        strings: {
           save: 'Salva',  // Default for save button
           clear: 'Pulisci', // Default for clear button
           cancel: 'Annulla' // Default for cancel button
        }
    });

    pickr.on('show', (color, instance) => {
        instance.setColor($(instance._root.button).val(), true);
    }).on('save', (color, instance) => {
        $(instance._root.button).val(color.toHEXA().toString());
        instance.hide();
    });

我想用一种简单的方式，只按类实例化多个输入。没有身份证

有人使用这个插件吗

---

更新：更新小提琴（仍不工作）

您必须更改每个新输入的选择器，因此我在new_row函数之外添加了一个var，每次单击按钮时都会添加它，并使用它为每个输入添加一个唯一的类，这样您的代码就会变成这样

    var picCounter = 0;

    function new_row() {
       picCounter++;
      //    ADD INPUT

     var newInput = $('<div class="divpicker"><input type="text" class="form-control picker field'+picCounter+'" value="#CCC" name="picker[]"/></div>');

  newInput.appendTo($("#divpickers"));

  //    INIT PICKR


  var newPicker = Pickr.create({
        el: '.field'+picCounter,
        theme: 'nano', // or 'monolith', or 'nano'
        useAsButton: true,
        comparison: false,
        swatches: [
            'rgb(244, 67, 54)',
            'rgb(233, 30, 99)',
            'rgb(156, 39, 176)',
            'rgb(103, 58, 183)',
            'rgb(63, 81, 181)',
            'rgb(33, 150, 243)',
            'rgb(3, 169, 244)',
            'rgb(0, 188, 212)',
            'rgb(0, 150, 136)',
            'rgb(76, 175, 80)',
            'rgb(139, 195, 74)',
            'rgb(205, 220, 57)',
            'rgb(255, 235, 59)',
            'rgb(255, 193, 7)'
        ],
        defaultRepresentation: 'HEX',
        lockOpacity: true,
        components: {

            // Main components
            preview: true,
            opacity: false,
            hue: true,

            // Input / output Options
            interaction: {
                hex: false,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: true,
                save: true
            }
        },

        strings: {
           save: 'Salva',  // Default for save button
           clear: 'Pulisci', // Default for clear button
           cancel: 'Annulla' // Default for cancel button
        }
    });



  newPicker.on('show', (color, instance) => {
        instance.setColor($(instance._root.button).val(), true);
    }).on('save', (color, instance) => {
        $(instance._root.button).val(color.toHEXA().toString());
        instance.hide();
    });

}

var picCounter=0；
函数new_row（）{
picCounter++；
//添加输入
var newInput=$（''）；
newInput.appendTo（$（“#divpickers”）；
//初始化选择器
var newPicker=Pickr.create({
el:“.字段”+微微计数器，
主题：'纳米'，//或'巨石'，或'纳米'
useAsButton：对，
比较：错，
样例：[
"rgb(244,67,54)",，
"rgb(233,30,99)",，
“rgb（156、39、176）”，
"rgb(103,58,183)",，
"rgb(63,81,181)",，
“rgb（33150243）”，
"rgb(3,169,244)",，
"rgb(0188212)",，
"rgb(0,150,136)",，
"rgb(7617580)",，
“rgb（13919574）”，
"rgb(205,220,57)",，
“rgb（255、235、59）”，
‘rgb（255、193、7）’
],
defaultRepresentation:'十六进制'，
洛克：是的，
组成部分：{
//主要成分
预览：对，
不透明度：假，
色调：是的，
//输入/输出选项
互动：{
十六进制：错，
rgba：错，
hsla：错，
hsva：错，
cmyk：错，
输入：正确，
清楚：是的，
保存：正确
}
},
字符串：{
save:'Salva'，//保存按钮的默认值
清除：“Pulisci”，//清除按钮的默认值
cancel:'Cannela'//取消按钮的默认值
}
});
newPicker.on（'show'，（颜色，实例）=>{
setColor（$（instance.\u root.button）.val（），true）；
}).on（'保存'，（颜色，实例）=>{
$（instance._root.button）.val（color.toHEXA（）.toString（））；
instance.hide（）；
});
}

这是工作小提琴