Drag and drop with custom HTML

Hello! I am trying to have one of my questions a freeform drag and drop (e.g., participants will move icons on a screen) and I want to save either the final image or the coordinates of the icons. I only want 2 of the items to move (imagine there is a square, and the icon for ‘lunch’ doesn’t move, and you move an icon for ‘breakfast’ and an icon for ‘dinner’. I tried the following code but I cannot seem to make it work. I was hoping that someone could have better insight as to what needs to be corrected. Thank you in advance!

1<div style="position: relative; width: 600px; height: 400px; margin: 20px auto; 
2            background: url('https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_eXemGs5D7yFpvhz') 
3            no-repeat center; background-size: contain; border: 1px solid #ccc;" 
4     id="slide-container">
5  <img style="width: 50px; position: absolute; top: 150px; left: 450px; cursor: grab;" 
6       src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_vrPsqekWIt26Rxt" 
7       id="breakfast" alt="Breakfast">
8  <img style="width: 50px; position: absolute; top: 180px; left: 230px; cursor: default;" 
9       src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_F7HsYTB4JUTYy8v" 
10       id="lunch" alt="Lunch">
11  <img style="width: 50px; position: absolute; top: 250px; left: 450px; cursor: grab;" 
12       src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWecqmidZuBBznx" 
13       id="dinner" alt="Dinner">
14</div>
15
16<script>
17  // Get references to the breakfast and dinner images (only these will be draggable)
18  const draggableIcons = document.querySelectorAll('#breakfast, #dinner');
19
20  draggableIcons.forEach(icon => {
21    let isDragging = false;
22    let offsetX, offsetY;
23
24    // Start dragging when mouse is pressed on the icon
25    icon.addEventListener("mousedown", (event) => {
26      isDragging = true;
27      offsetX = event.clientX - icon.getBoundingClientRect().left;
28      offsetY = event.clientY - icon.getBoundingClientRect().top;
29      icon.style.cursor = "grabbing";  // Change cursor to 'grabbing'
30      event.preventDefault();  // Prevent other default behaviors (like image drag)
31
32      // Add mousemove and mouseup event listeners to manage drag
33      document.addEventListener("mousemove", onMouseMove);
34      document.addEventListener("mouseup", onMouseUp);
35    });
36
37    // Handle moving the icon
38    function onMouseMove(event) {
39      if (isDragging) {
40        icon.style.left = `${event.clientX - offsetX}px`;
41        icon.style.top = `${event.clientY - offsetY}px`;
42      }
43    }
44
45    // Stop dragging when mouse is released
46    function onMouseUp() {
47      isDragging = false;
48      icon.style.cursor = "grab";  // Reset cursor to 'grab'
49      document.removeEventListener("mousemove", onMouseMove);
50      document.removeEventListener("mouseup", onMouseUp);
51    }
52  });
53</script>
54