I have written the following script that should run a GET request to a specific URL when a set of checkboxes are ticked on and off. It works perfectly locally but in Production, I get a 404 response.

Any idea why and how to fix it?

/**
* Remove all child nodes from an element
* @param {Object} element The element to empty
*/
function empty (element) {
    var children = Array.prototype.slice.call(element.childNodes);

    children.forEach(function (child) {
        element.removeChild(child);
    });

}

function toggleItem(toggler, itemType, itemUrl, itemState, itemSource) {
    let outputDiv = toggler.parentNode.querySelector('.theme-park-item-toggler-output');
    empty(outputDiv);

    let xhr = new XMLHttpRequest();
    xhr.open('GET', itemUrl);
    xhr.send(null);

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) { // 4 means "Done"
            if (xhr.status === 204) { // 204 means processed successfully with no content returned
                console.log('success');

                if (itemState == true) {
                    let img = document.createElement('img');
                    img.src = itemSource;
                    outputDiv.appendChild(img);
                }
            } else {
                console.log('Failure to toggle');
                toggler.toggleAttribute('checked');
            }
        }
    };
}

document.addEventListener("turbo:load", function() {
    document.querySelectorAll('.theme-park-item-toggler').forEach(function(the_toggler) {
        the_toggler.addEventListener('change', function(e) {
            toggleItem(the_toggler, the_toggler.dataset.type, the_toggler.dataset.url, e.target.checked, the_toggler.dataset.source);
        });
    });
});