Para todas mis otras opciones, esto funciona muy bien (solo edito la parte de reemplazo para que sea la identificación correcta).

(Nota: todos los "están eliminados, ya que en producción se crean dinámicamente con js)

 <div class=\"singlecontrol\"><span style=\"vertical-align: middle;\">Colour Picker</span><input oninput=\"updatetxtcolour(event)\" id=\"colourpicker"+textcount+"\" value=\"#dfe481\" type=\"color\" autocomplete=\"off\" ></div> <script> function updatetxtcolour(e) { var ideditaded = e.target.getAttribute("id").replace("colourpicker", ""); document.getElementById("quotetext"+(ideditaded)).style.color = document.getElementById("colourpicker"+(ideditaded)).value; } </script>

Pero para mi selector de fuentes funciona así...

 <div class=\"singlecontrol\"><span style=\"vertical-align: middle;\">Font Picker</span><input id=\"font"+textcount+"\" type=\"text\" autocomplete=\"off\" ></div> <script> $('#font'+(textcount)) .fontselect() .on('change', function() { applyFont(this.value); }); } function applyFont(font) { console.log('You selected font: ' + font); // Replace + signs with spaces for css font = font.replace(/\+/g, ' '); // Split font into family and weight font = font.split(':'); var fontFamily = font[0]; var fontWeight = font[1] || 400; // Set selected font on paragraphs $('quotetext'+(textcount)).css({fontFamily:"'"+fontFamily+"'", fontWeight:fontWeight}); } </script>

Tengo problemas para que el último selector de fuentes funcione de la misma manera que los demás, es decir, para pasar la ID correcta, ya que se crean dinámicamente, así https://stackoverflow.com/a/69397361/4772471

Todas mis otras opciones llaman a una función en la entrada, pero esta usa un oyente y luego ejecuta una función, así que estoy perplejo.