get imgs dynamically

index.html

@@ -5,42 +5,7 @@
         <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
         <script src="http://localhost:35729/livereload.js"></script>
         <script src="croppie.js"></script>
-        <script>
+        <script src="index.js"></script>
-
-            var crops = [];
-
-            function makeCroppie(divId, imgUrl) {
-                elem = document.getElementById(divId)
-                cpie = new Croppie(elem, {
-                    viewport: {
-                        width: elem.clientWidth,
-                        height: elem.clientHeight,
-                        type: 'square'
-                    },
-                    showZoomer: false,
-                });
-
-                cpie.bind({
-                    url: imgUrl
-                });
-
-                crops.push(cpie)
-            }
-
-            function main() {
-                makeCroppie('idimg1', 'img1.jpg')
-                makeCroppie('idimg2', 'img2.jpg')
-            }
-
-            function showCrop() {
-                for(cpie of crops) {
-                    console.log(cpie.get())
-                    console.log(cpie.element.clientWidth)
-                    console.log(cpie.element.clientHeight)
-                }
-            }
-
-        </script>
         <!--
             width: 3264px;
             height: 4224px;
@@ -81,7 +46,7 @@
                 height: 100%;
                 aspect-ratio: 85 / 110;
             }
-            .letter-portrait .img {
+            .letter-portrait .collage-img {
                 height: 50%;
             }
             .letter-landscape-2 {
@@ -106,11 +71,11 @@
                 <button class="showbuton" onClick="showCrop()">Snap Collage</button>
             </div>
             <div class="imagebox">
-            <div class="image-surface letter-landscape-2">
+            <div id="collage" class="image-surface letter-landscape-2">
-                <div class="img img1" id="idimg1">
+                <div class="collage-img img1" data-collage-image-url="img1.jpg">
                     <!-- <img src="img1.jpg"> -->
                 </div>
-                <div class="img img2" id="idimg2">
+                <div class="collage-img img2" data-collage-image-url="img2.jpg">
                     <!-- <img src="img2.jpg"> -->
                 </div>
             </div>

index.js

@@ -0,0 +1,38 @@
+
+var crops = [];
+
+function makeCroppieElem(elem, imgUrl) {
+    cpie = new Croppie(elem, {
+        viewport: {
+            width: elem.clientWidth,
+            height: elem.clientHeight,
+            type: 'square'
+        },
+        showZoomer: false,
+    });
+
+    cpie.bind({
+        url: imgUrl
+    });
+
+    crops.push(cpie)
+}
+
+function makeCroppie(collageDivId) {
+    const collageDiv = document.getElementById(collageDivId)
+    for(elem of collageDiv.getElementsByClassName("collage-img")) {
+        makeCroppieElem(elem, elem.dataset.collageImageUrl)
+    }
+}
+
+function main() {
+    makeCroppie("collage")
+}
+
+function showCrop() {
+    for(cpie of crops) {
+        console.log(cpie.get())
+        console.log(cpie.element.clientWidth)
+        console.log(cpie.element.clientHeight)
+    }
+}