for loop to iterate through array[i] only iterates to last index?

I am using a slick carousel and I wanted the non-active slides to be at opacity .4.... So I created an array of variables (the variables are referencing classes of the slides) and a for loop to iterate through the variables for a .click() jQuery function on click of X class, .css opacity .4 on all others. On the click only one class (one other slide image) would fade, so I looped through the array and console.logged both the array[i] and the array. To my surprise when console.logging array[i] it logged the html with the class and inline styling changes made. When I console logged the array it logged [div.test__image.explosiveness] (The very last index in the array). What is wrong with my loop/how can I target all of the indexes for a css change? I am using PUG for the HTML and JS/ jQuery. Thank you for your help and suggestions in advance!

.carousel
.carousel__slide
    .test
        .test__image.explosiveness
        p Explosiveness
.carousel__slide
    .test
        .test__image.agility
        p Agility
.carousel__slide
    .test
        .test__image.flexibility
        p Flexibility
.carousel__slide
    .test
        .test__image.balance
        p Balance
.carousel__slide
    .test
        .test__image.footwork
        p Footwork
.carousel__slide
    .test
        .test__image
        p Explosiveness

// carousel fades
var agility = document.getElementsByClassName('agility'),
    explosiveness = document.getElementsByClassName('explosiveness'),
    flexibility = document.getElementsByClassName('flexibility'),
    balance = document.getElementsByClassName('balance'),
    footwork = document.getElementsByClassName('footwork');

var nonFootwork = (agility, balance, flexibility, explosiveness);

$('.footwork').click(function(){
    var len = nonFootwork.length;
    for(var i = 0; i < len; i++){
        $(nonFootwork[i]).css('opacity', '.4');
        console.log(nonFootwork[i]);
        console.log(nonFootwork);
        $('.footwork').css('opacity', '1');
    }
});