Creating multiple custom graphic sliders on the same page

Hello,
Complete newbie to coding in JS, so I'm hoping someone can help. I'm trying to create a set of custom graphic sliders so that people can effectively choose their preferred portion of a variety of different foods. I found this incredibly helpful script posted by Nami, however I am experiencing difficulties with getting more than one slider to appear on the same page. The script is as follows:
Qualtrics.SurveyEngine.addOnload(function() {
  /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function() {
  /*Place your JavaScript here to run when the page is fully displayed*/
 
 // Get Image
  var img_apple = jQuery("#myImage1");
    // Function to look for track changes in slider
  jQuery("input[type = hidden]").change(function() {
    var answer_apple = parseInt(jQuery("#QID1 input.ResultsInput").eq(0).val());
    console.log(answer_apple)
    // Images in order below
    var images_list_apple = [
// Image URL's go here
    ]
    // Swap image according to answer (zero indexed, thus -1)
    img_apple[0].src = images_list_apple[answer_apple - 1]
  });
});

Qualtrics.SurveyEngine.addOnUnload(function() {
  /*Place your JavaScript here to run when the page is unloaded*/

});
Then for the second slider I have changed "#myimage1", the variable names, and changed the "QID" (changing the .eq() value, as previously suggested broke the entire script!). I can get all of the sliders to appear on one page, however upon clicking the first slider it loses the default image for the remaining sliders:
The sliders still function correctly and load the appropriate images, but I need that image to remain on-screen. Any suggestions? Hoping someone here can help.
Many thanks in advance,
Chris