Dynamically adding more gliders causes previous ones to stop working

[labros-zotos]

I am trying to add more gliders dynamically. Each time I load the html of the new gliders (with an API request that returns HTML and I append it in a container div) I run the following code:

var gliders = document.querySelectorAll('.glider:not(.glider-loaded)');
    for (var i = 0; i < gliders.length; i++) {
        new Glider(gliders[i], {
            slidesToShow: 1,
            dots: gliders[i].parentNode.querySelector('.dots'),
            scrollLock: true,
            arrows: {
                prev: gliders[i].parentNode.querySelector('.glider-prev'),
                next: gliders[i].parentNode.querySelector('.glider-next')
            }
        });
        gliders[i].classList.add("glider-loaded")
    }
    

The first time it runs everything works great.

The second time, the new gliders are initialized correctly but the previous ones stop working(arrows not functioning).
Has anyone seen this behavior before? Do you have any advice on what may be the cause of the issue?

Thanks.