For all my other options this works great (i just editing the replace part to be the correct id)..

(Note: all "'s are 'd out as in production these are dynamically created with 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> 

But for my font picker it works like so...

<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>

I'm having trouble getting the latter font picker to function in the same manner as the others, that is to pass the correct ID as these are created dynamically like so https://stackoverflow.com/a/69397361/4772471

All of my other options call a function oninput but this one uses a listener and then runs a function so i'm stumpted.