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...

http://www.pulsecreative-clients.com/staging/hogshead/#golf

 const clickOnMe = document.querySelectorAll(".course-button");

 let clickOnMe = document.querySelectorAll(".course-button"); 
 Array.from(clickOnMe).forEach(el => 
 el.addEventListener("click", e => 
 let showBox = e.currentTarget.nextElementSibling;
 showBox.classList.toggle("open-nav"); 
 ); 
 );

.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;

<div id="jump-button" class="jumpbuttons-container">
 <div class="subnav">
 <button class="course-button">
 JUMP TO <i class="fa fa-angle-up"></i>
 </button>
 <div class="subnav-content">
 <div style="display: flex;">
 <div class="golfcoursebutton"><a href="#golf/1">1</a></div>
 <div class="golfcoursebutton"><a href="#golf/2">2</a></div>
 <div class="golfcoursebutton"><a href="#golf/3">3</a></div>
 <div class="golfcoursebutton"><a href="#golf/4">4</a></div>
 <div class="golfcoursebutton"><a href="#golf/5">5</a></div>
 <div class="golfcoursebutton"><a href="#golf/6">6</a></div>
 </div>

 <div style="display: flex;">
 <div class="golfcoursebutton"><a href="#golf/7">7</a></div>
 <div class="golfcoursebutton"><a href="#golf/8">8</a></div>
 <div class="golfcoursebutton"><a href="#golf/9">9</a></div>
 <div class="golfcoursebutton"><a href="#golf/10">10</a></div>
 <div class="golfcoursebutton"><a href="#golf/11">11</a></div>
 <div class="golfcoursebutton"><a href="#golf/12">12</a></div>
 </div>

 <div style="display: flex;">
 <div class="golfcoursebutton"><a href="#golf/13">13</a></div>
 <div class="golfcoursebutton"><a href="#golf/14">14</a></div>
 <div class="golfcoursebutton"><a href="#golf/15">15</a></div>
 <div class="golfcoursebutton"><a href="#golf/16">16</a></div>
 <div class="golfcoursebutton"><a href="#golf/17">17</a></div>
 <div class="golfcoursebutton"><a href="#golf/18">18</a></div>
 </div>
 </div>
 </div>
</div>

EDIT
UPDATED WITH SOLUTION

I've created a template part in PHP that copies a button to each slide in a carousel using fullpage.js.

Unfortunately, your code re-use is throwing an error. If we look at your source, we see:

div.jump-button
 button.course-button
 div.subnav-content

<script>
 const clickOnMe = ...
</script>

This is repeated ~20 times.

The issue is that const can only be declared once. After that, JS will throw an error. In fact, if we view the console, we see just that:

Basically, after the first declaration of const clickOnMe, an error is thrown after. That's why only the first one works. I would look into moving (and consolidating) the <script> where you define clickOnMe to the bottom and invoke that once all the HTML is loaded.

Edit:

Regarding your comment, I see what you're referring to. You're now querying all the elements correctly by moving the event binding to the bottom (awesome!), but your event listener will need to be updated as well. The change is actually answered here (by @jeyko-caicedo) by referring to the event object when toggling the classList.

A more complete answer would be that you need to reference the event object (to reference the clicked element) and then query the sibling subnav-content. One way is what jeyko suggested (via closure of the forEach). The other is in the event handler with either: 1 walking up the DOM tree (using e.currentTarget.parentNode) or 2: just reference the element directly like e.currentTarget.nextElementSibling.

let clickOnMe = document.querySelectorAll(".course-button"); 
Array.from(clickOnMe).forEach(function(el) // updated `e` to `el`
 el.addEventListener("click", (e) => 
 let showBox = e.currentTarget.nextElementSibling;
 showBox.classList.toggle("open-nav"); 
 ); 
);

querySelectorAll does not returns an array, so it doesn't have a forEach. Luckily, you can easily create an array out of it with Array.from:

// change this
clickOnMe.forEach(...
// to this
Array.from(clickOnMe).forEach(...

You're selecting the first of the document

document.querySelector(".subnav-content");

when it should be the first of the element

e.querySelector(".subnav-content");

querySelectorAll returns a NodeList. It's essentially just an Array of DOM Nodes, but it doesn't support all of the Array methods that you'd expect it to have. You'll have to cast it to an array first, or manually for loop over it instead of using forEach.