title: classList.toggle() is being applied only to last item
body: <p>I'm applying eventlistener from a loop to a dropdown menu, but only the last item has its class toggled no matter which item is being clicked on.</p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
              var item = document.querySelectorAll('#dropdown .hasSubMenu');
              var len = item.length;
  
              for (var i = 0; i &lt; len; i++) {
                  var items = item[i];
                  var menuItem = items.querySelector('.filter');
  
                  menuItem.addEventListener('click', function() {
                      items.classList.toggle('open');
                  });
              }
          });
  </code></pre>
  <p>The class 'open' is being added only to the last item from the loop.
  What am I doing wrong?</p>