If you change this:

<div id="popup1" class="overlay">

to this:

<div id="popup1" class="overlay" style=" z-index: 999;">

That should fix the popup/overlay issue.

And for the images not loading I think that's due to this: [mol=moles.consumableList, moles_select] since moles_select is a bunch of URLs on a single line which I don't think the image-layer-combiner-plugin supports. If you want a random number of moles then one way would be to ask an AI "Please make a javascript function called convertArrayOfImagesToSingleImage which takes an array of URLs and overlay them on a canvas so they turn them into a single layered PNG and return a PNG data URL" and then you'd use it like this or similar:

[mol=moles.consumableList, convertArrayOfImagesToSingleImage(moles_select.evaluateItem.split(" "))]

Edit: Actually tell the AI to implement convertArrayOfImagesToSingleImage by embedding the PNGs inside an SVG and return the data URL for the SVG. That way you don't have to deal with async stuff. Something like this might work:

function convertArrayOfImagesToSingleImage(pngUrls, width=1024, height=1024) {
  const images = pngUrls.map(url => `<image href="${url}" width="${width}" height="${height}" />`).join("\n  ");
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${images}</svg>`;
  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
}