i'm having issue with a responsive menu for screensize < 600px. I want to be able to display a submenu for each element in the menu by clicking on it. Take a look a the code available on the link below and you'll see in the js section, i have a for loop to add an eventListener on each item of the menu but inside the eventListener my counting variable (named i) is always equal to 6 therefore there are only 6 elements in the menu (so from 0 to 5).

var menu = document.getElementById('pull');
var list = document.querySelector('ul.clearfix');
var item = document.querySelectorAll('.item');
var dropdown = document.querySelector(".dropdown");

window.addEventListener("DOMContentLoaded", (event) => {
menu.addEventListener('click', function(){
    list.classList.toggle('active');
});
for(var i = 0 ; i < item.length ;  i++){
  
    item[i].addEventListener('click', function(){
        dropdown.classList.toggle('active');
    });
}
    
window.addEventListener('resize', function(){
    if (window.matchMedia("(min-width: 480px)").matches) {
        if(list.style.display == "none"){
            list.removeAttribute('style');
        }
      }
   });
});

This means i can't use a querySelectorAll on my submenus (class="dropdown") to display them because dropdown[6] does not exist I need to do that in raw js 😭 (and i'm struggling to find an answer to my problem 🥲 ) Here is the codepen link https://codepen.io/raumain/pen/zYzXrwM