Tile gallery problem (Javascript)

[Rubbereon]

I used some javascript I nabbed from another website because this stuff was hella complicated. (or at least I think that's what I did, this script was there since 2024, so my memory's getting fuzzy)

I had no idea how to make a minimalist gallery that didn't take too much space on the post, but now I want another gallery lower on my blog page and I just can't figure it out. I can't reuse the id because it's an id not a class, it's not reusable. I tried cloning the entire code inside the script brackets with a brand new "tileMe2" id completely separate from the first script and it breaks the gallery. What should I do?

Here's the code and it works perfectly when used alone, but when I need a secondary gallery on the same page it's unworkable.

Code

"use strict"
    window.onload = window.onresize = function() {
        resize("tileMe", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }

The page affected by this problem: https://rubbereon.nekoweb.org/blog/My-thoughts-on-Palworld.html

Notice how 1 group of images correctly tile tightly packed together and the other takes 50% of the webpage.

This is what the script looks like duplicated in the head tag of my page.

Code

<script> "use strict"
    window.onload = window.onresize = function() {
        resize("tileMe", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }
    </script>
    <script> "use strict"
    window.onload = window.onresize = function() {
        resize("tileMe2", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }
</script>