title: for loop over elements in vanilla javascript - only the first element in the accordion works
body: <p>I'm working on a small accordion component. I know how to make it work in jQuery using this code:</p>
  <pre><code>const eCta    = $('.js-accordion-cta');
  const eTarget = $('.js-accordion-target');
  const state   = 'active';
  
  eCta.on('click', function(){
     $(this).next(eTarget).toggleClass(state);
     $(this).toggleClass(state);
  });
  </code></pre>
  <p>I wan't to avoid using external libraries like jQuery but I can't get it to work with js. It only works on the first element in the accordion.</p>
  <pre><code>const item = document.querySelectorAll(&quot;.js-accordion-item&quot;);
  const eCta = document.querySelector(&quot;.js-accordion-cta&quot;);
  const eTarget = document.querySelector(&quot;.js-accordion-target&quot;);
  const state = &quot;active&quot;;
  
  item.forEach(function (item, index) {
    
    eCta.onclick = function () {
      
      this.classList.toggle(state);
      this.nextElementSibling.classList.toggle(state);
      
    };
    
  });
  
  </code></pre>
  <pre><code>&lt;div class=&quot;item js-accordion-item&quot;&gt;
  
      &lt;a class=&quot;cta js-accordion-cta&quot;&gt;Accordion Title 1 (cta)&lt;/a&gt;
  
      &lt;div class=&quot;target js-accordion-target&quot;&gt;
        &lt;h3&gt;Lorem ipsum item&lt;/h3&gt;
        &lt;p&gt;Content lorem ipsum dolor sit amet, consectetur adipiscing elit &lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
    
  &lt;div class=&quot;item js-accordion-item&quot;&gt;
  ...
  </code></pre>
  <p>What is the correct way to loop over dom items to interact with them? Preferable in ES6</p>
  <p><a href="https://codepen.io/ronnidc/pen/YzGZPBZ" rel="nofollow noreferrer">Codepen demo</a></p>