Is it possible to invdividually control dynamically created picker-elements with one picker-object?

[SchnoppDog]

Your question

Hi, I have a question regarding the color-picker. With an input I create between 2 to 6 color-picker dynamically roughly like you described in this FAQ: https://jsfiddle.net/Simonwep/9ghk71c3/. Now I want that every element I create is created with only one picker-object like in the linked FAQ. Now I want that every picker-button has its own assigned event-driven picker. Is it possible to create 2 or more picker instances dynamically with only one picker-object, but those should be individually controllable. I.E:

Creating multiple elements with one picker-object:

for(let counter = 0; counter < inputNumber; counter++) {
                if(counter % 3 === 0) {
                    createDivFormRow    = document.createElement("div")
                    createDivFormRow.setAttribute("class", "form-row")
                    createDivFormGroup.appendChild(createDivFormRow)
                }

                let createDivCol            = document.createElement("div")
                createShuffleColorInput     = document.createElement("input")
                createShuffleColorInputDiv  = document.createElement("div")

                createShuffleColorInput.setAttribute("type", "button")
                createShuffleColorInput.setAttribute("class", "form-control mt-1 mb-1")
                createShuffleColorInput.setAttribute("value", `Color ${counter+1}`)
                createShuffleColorInput.style.color = 'white'
                createDivCol.setAttribute("class", "col-sm")
                createShuffleColorInputDiv.appendChild(createShuffleColorInput)
                createDivCol.appendChild(createShuffleColorInputDiv)
                createDivFormRow.appendChild(createDivCol)

                shufflePicker               = new Pickr({
                    el: createShuffleColorInputDiv,
                    container: 'div',
                    theme: 'classic',
                    default: '#000000',
                    defaultRepresentation: 'RGBA',
                    useAsButton: false,
                    position: 'right-start',
                    swatches: [
                        'rgba(255,255,255,1)',
                        'rgba(255,0,0,1)',
                        'rgba(0,255,0,1)',
                        'rgba(0,0,255,1)',
                        'rgba(255,102,0,1)',
                        'rgba(255,0,255,1)',
                        'rgba(0,255,255,1)',
                        'rgba(255,255,0,1)',
                        'rgba(42,183,202,1)',
                        'rgba(101,30,62,1)',
                        'rgba(0,91,150,1)',
                        'rgba(0,102,77,1)',
                        'rgba(209,17,65,1)',
                        'rgba(0,177,89,1)',
                        'rgba(0,174,219,1)',
                        'rgba(255,51,119,1)',
                        'rgba(77,179,0,1)',
                        'rgba(30,179,0,1)',
                        'rgba(201,67,0,1)'
                    ],

                    components: {
                        preview: true,
                        opacity: false,
                        hue: true,

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

Every created picker-element should only be event-driven by this shufflePicker-picker-object:

shufflePicker.on('save', (color, instance) => {
                console.log('save', color, instance);
})

If I am writing it like this only the last element I create can show me the console.log()-output. All the other elements before the last don't show any console.log()-output. Is there a way that I can dynamically create picker-elements which are all event-driven individually, but are only created and only driven with one picker-object?

I hope I have been able to present my problem clearly enough.

Your environment:

Version (see Pickr.version): 1.7.2
Used bundle (es5 or normal one): normal one
Used theme (default is classic): default
Browser-version:  Opera 71.0.3770.271
Operating-system:  Windows 10 / (Website running on raspberry pi OS Version August 2020)

[SchnoppDog]

Okay I worked out the problem. The problem was that my event-driven object wasn't in the for-loop, thus only connecting to the last created element. Putting the event-driven object inside the for-loop where my pickr-object is solved the problem.