Почему js код так не понятно работает

Есть 2 кода с виду не чем не отличаются но функционал режется, почему?

document.querySelector('.footer_btn').addEventListener('click', function(){
    document.querySelectorAll('.invisible').forEach(function(elem){
        elem.classList.toggle('invisible')
        console.log(elem)
    })
});

В этом коде elem.classList.toggle('invisible') только удаляется при повторном клике не добавляется.

let hidden = document.querySelectorAll('.invisible');
document.querySelector('.footer_btn').addEventListener('click', function(){
    hidden.forEach(function(elem){
        elem.classList.toggle('invisible')
        console.log(elem)
    })
});

но когда мы задали глобальную переменную с классом invisible всё работает корректно, почему?