Function only getting last array

[joshattwood]

I have a number of elements which I am getting by ClassName and then creating a scene for each of them using the array given by the ClassName variable. This then changes the innerHTML of a

item to display data unique to the original elements when it is scrolled over. Everything works fine, including the indicators showing the right array number, however the .on function only seems to change the

to the last element in the array every time.

I am trying to avoid having to include jQuery to any vanilla javascript help would be much appreciated.

`
var controller = new ScrollMagic.Controller();

var videoElements = document.getElementsByClassName("video");

for (var i=0; i < videoElements.length; i++) { // create a scene for each element

                var directorName = videoElements[i].getAttribute("data-director");
                var clientName = videoElements[i].getAttribute("data-client");

                var captionText = document.getElementById("caption");

                function runText() {
                    captionText.innerHTML = clientName + "<br>" + directorName;
                };

                new ScrollMagic.Scene({
                                    triggerElement: videoElements[i],// y value not modified, so we can use element as trigger as well
                                    offset: 1000,
                                    duration: 100,
                                })

                .on("start", function () {document.getElementById("caption").innerHTML = directorName + "<br>" + clientName})

                                 // add class toggle
                                .addIndicators({name: "digit " + (i+1) }) // add indicators (requires plugin)
                                .addTo(controller)

}

`