Splide Slider - Using progress bars when initializing with a for loop? - slider

Question

I'm trying to get my splide progress bars to work when initializing the sliders with a for loop as shown below.
I'm not sure about how to get it right.
The sliders and progress bars seem to initialize fine, but then only the last slider updates its progress when it's moved.
Any ideas from someone who have dealt with Splide?
Thanks!
var splides = document.querySelectorAll('.splide-slider');
if(splides.length){
for(var i=0; i<splides.length; i++){
var splideElement = splides[i];
var splideId = splideElement;
var splideClassname = splideElement.classList[0];
var splideDefaultOptions =
{
lazyLoad: 'nearby',
preloadPages: 2,
autoWidth: true,
wheel: true,
arrows: true,
pagination: false,
waitForTransition: false,
perPage: 1,
}
var splide = new Splide( splideElement, splideDefaultOptions );
splide.on( 'mounted move', function () {
var getBar = '.'+ splideClassname + ' .my-slider-progress-bar';
var bar = splide.root.querySelector(getBar);
var end = splide.Components.Controller.getEnd() + 1;
bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
} );
splide.mount();
}
}
and the HTML:
<div class="splide-slider">
<div class="splide__track">
<ul class="splide__list">
<div class="splide__slide"></div>
<div class="splide__slide"></div>
<div class="splide__slide"></div>
</ul>
</div>
<div class="my-slider-progress">
<div class="my-slider-progress-bar"></div>
</div>
</div>
<div class="splide-slider">
<div class="splide__track">
<ul class="splide__list">
<div class="splide__slide"></div>
<div class="splide__slide"></div>
<div class="splide__slide"></div>
</ul>
</div>
<div class="my-slider-progress">
<div class="my-slider-progress-bar"></div>
</div>
</div>

Answer 1

Ok so for anyone who might be in the same situation i missed to scope issue. The working solution is:
for (let i = 0; i < splides.length; i++) {
funcs[i] = function() {
let splideElement = splides[i];
var splideClassname = splideElement.classList[0];
var splideDefaultOptions =
{
lazyLoad: 'nearby',
preloadPages: 2,
autoWidth: true,
wheel: true,
arrows: true,
pagination: false,
waitForTransition: false,
perPage: 1,
}
var splide = new Splide( splideElement, splideDefaultOptions );
splide.on( 'mounted move', function () {
var getBar = '.'+ splideClassname + ' .my-slider-progress-bar';
var bar = splide.root.querySelector(getBar);
var end = splide.Components.Controller.getEnd() + 1;
bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
});
splide.mount();
};
}
for (var j = 0; j < splides.length; j++) {
funcs[j]();
}