title: Multiple ids and classes to share AddEventListener
body: <p>What I'm trying to do is link identical navbar ids and classes into a single event listener. This is for a blog that has different styling for different pages. Both ids/classes are the exact same, with similar names ( except some minor css changes ). Either set of ids/classes would work on their own ( menuNav or menuNav-c ). Copying, pasting the same code then changing the variables, functions and adding the "-c" at the ends didn't work either, naturally that is excessive code. Any help is appreciated.</p>
  
  <pre><code>let openCloseNav = document.querySelectorAll("#openCloseNav", "#openCloseNav-c");
  let menuNav = document.querySelectorAll("#menuNav", "#menuNav-c");
  
  openCloseNav.addEventListener("click", openCloseNavClick);
  
  function openCloseNavClick() {
    openCloseNav.classList.toggle("toggle toggle-c");
    menuNav.classList.toggle("navOpen navOpen-c");
  }
  </code></pre>
  
  <p>The console brings up "openCloseNav" is not a function. However if I remove either the first or second set of ids/classes, only one set will work.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I got it working, thanks for the help folks. After more digging and tinkering, it all started to make more sense. For those who may have similar issues, here's what worked for me:</p>
  
  <pre><code>let firstMenuToggle = document.querySelectorAll("#openCloseNav");
  let firstMenu = document.querySelectorAll("#menuNav");
  
  for (let i = 0; i &lt; firstMenuToggle.length; i++) {
    firstMenuToggle[i].addEventListener("click", function() {
      firstMenuToggle[i].classList.toggle("toggle");
      firstMenu[i].classList.toggle("navOpen");
    });
  }
  
  let secondMenuToggle = document.querySelectorAll("#openCloseNav-c");
  let secondMenu = document.querySelectorAll("#menuNav-c");
  
  for (let i = 0; i &lt; secondMenuToggle.length; i++) {
    secondMenuToggle[i].addEventListener("click", function() {
      secondMenuToggle[i].classList.toggle("toggle-c");
      secondMenu[i].classList.toggle("navOpen-c");
    });
  }
  </code></pre>