the for loop exit after it has been executed one time

Question

the for loop in the following code exit after removing one class and doesn't remove the other one unless I click the button again

I want to remove the class hidden from 2 divs but I don't want to use querySelectorAll.

is there any way to do it using getElementsByClassName and for loop, without JQuery Just JavaScript

I did the same thing before but it was to change the style of something not to add or remove classes.

var items = document.getElementsByClassName('hidden');

let show = document.querySelector('.show-modal');

show.addEventListener('click', function(){
    for (let i = 0; i < items.length; i++){
        items.item(i).classList.remove('hidden');  
    }
}); 

Answer 1

Using a forEach would help -

show.addEventListener('click', () => {
    items.forEach((element) => {
        element.classList.remove('hidden');  
    })
});