How to loop multiple images on a single page/post

Hello I am using openseadragon, and I was able to reference one image on my page via openseadragon, but how to do loop more images so I can have 5 more images on the page…

Currently I have this as my javascript

    var imagePath = "/wp-content/uploads/" + $('#materials-osd').attr('data-image');
    var viewer = OpenSeadragon({
        id: "materials-osd",
        prefixUrl: "/wp-content/plugins/zoom-openseadragon/images/",
        tileSources: {
            type: "image",
            url: imagePath,
            buildPyramind: false
        }
    });
})(jQuery);

Code (markup):

This is my code I inputted into a wordpress block

<div id="materials-osd" style="height:460px; width:310px;" data-image="2020/05/dscn0348-1.jpg"></div>

Code (markup):

So I need to do the following
(1) fix references to your "id" and make it a variable vs static name
(2) fix the div block to include a unique class name that you can search on for the .each() function
(3) implement the "each" loop and update the object references for id and imagepath
(4) add 2 or more div blocks to test your code. Note that you can test the code after each step (should do that) .
The classname be something like "suarrmaterials-zoomable-image"
add some comments to describe what is going on. Most importantly, separate the Events functionality from the OSD functionality as right now it isn't clear in the js file.
Any advice helps thank you.