title: querySelectorAll with forEach function not working for toggle button on carousel slides
body: <p>I've created a template part in PHP that copies a button to each slide in a carousel using fullpage.js. The template part has a hidden div that should open up navigation for each slide. Trying the code below, I can only get this button to work on the first slide. I'm thinking an iterated class name might help, but not sure why querySelectorAll wouldn't do it. Any advice appreciated... </p>
  
  <p><a href="http://www.pulsecreative-clients.com/staging/hogshead/#golf" rel="nofollow noreferrer">http://www.pulsecreative-clients.com/staging/hogshead/#golf</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    const clickOnMe = document.querySelectorAll(".course-button");
  
      let clickOnMe = document.querySelectorAll(".course-button"); 
      Array.from(clickOnMe).forEach(el =&gt; {
          el.addEventListener("click", e =&gt; { 
              let showBox = e.currentTarget.nextElementSibling;
              showBox.classList.toggle("open-nav"); 
          }); 
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.subnav-content {
      position: fixed;
      bottom: 15%;
      z-index: 1;
      box-sizing: border-box;
      padding: 10px;
      background-color: #000;
      display: none;
  }
  
  .golfcoursebutton {
      box-sizing: content-box;
      min-width: 30px;
      height: 30px;
      padding: 4px;
      margin: 4px;
      background-color: #fff;
      color: #000; 
      text-align: center;
  }
  
  .open-nav {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="jump-button" class="jumpbuttons-container"&gt;
      &lt;div class="subnav"&gt;
          &lt;button class="course-button"&gt;
              JUMP TO &lt;i class="fa fa-angle-up"&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;div class="subnav-content"&gt;
              &lt;div style="display: flex;"&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/1"&gt;1&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/2"&gt;2&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/3"&gt;3&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/4"&gt;4&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/5"&gt;5&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/6"&gt;6&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div style="display: flex;"&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/7"&gt;7&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/8"&gt;8&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/9"&gt;9&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/10"&gt;10&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/11"&gt;11&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/12"&gt;12&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div style="display: flex;"&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/13"&gt;13&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/14"&gt;14&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/15"&gt;15&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/16"&gt;16&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/17"&gt;17&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="golfcoursebutton"&gt;&lt;a href="#golf/18"&gt;18&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>EDIT</em> 
  UPDATED WITH SOLUTION</p>