[FIXED] How to make JS code accept multiple similar IDs

Issue

I have the JS code below that I use with the form after it. However, it only calls the first dropdown and ignores the rest. The dropdown are generated by Hugo (SSG) and I all share the same ID/class in the menu. I need help to make the code work for multiple dropdown menus.

 document.getElementById("dropbtn").addEventListener('click', function() { 
  document.getElementById("sub-menu").classList.toggle("show");
  var x = document.getElementById("dropbtn").getAttribute("aria-expanded"); 
  if (x == "true") 
  {
  x = "false"
  } else {
  x = "true"
  }
  document.getElementById("dropbtn").setAttribute("aria-expanded", x);
});
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("sub-menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

<nav>
           <ul>
             <li class="dropdown" id="dropdown">
              <a id="dropbtn" class="dropbtn" href="#" aria-expanded="false">Toggle<span class="drop-icon" for="toggle">▾</span></a>
              <ul id="sub-menu" class="sub-menu">
                <li>
                  <a href="/a/">A</a>
                </li>
                <li>
                  <a href="/b/">B</a>
                </li>
                <li>
                  <a href="/c/" >C</a>
                </li>
              </ul>
             </li>
             <li class="dropdown" id="dropdown">
              <a id="dropbtn" class="dropbtn" href="#" aria-expanded="false">Dropdown <span class="drop-icon" for="dropdown">▾</span></a>
              <ul id="sub-menu" class="sub-menu">
                <li>
                  <a href="/d/">D</a>
                </li>
                <li>
                  <a href="/e/">E</a>
                </li>
                <li>
                  <a href="/f/">F</a>
                </li>
              </ul>
             </li>
           </ul>
        </nav>

Solution

It's not reccomended to use multiple id's with the same name. Here's my solution for your case.

<nav>
  <ul>
    <li class="dropdown">
      <a class="dropbtn" aria-expanded="false" href="#">Toggle<span class="drop-icon">▾</span></a>
      <ul class="sub-menu">
        <li>
          <a href="/a/">A</a>
        </li>
        <li>
          <a href="/b/">B</a>
        </li>
        <li>
          <a href="/c/">C</a>
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropbtn" aria-expanded="false" href="#">Dropdown <span class="drop-icon">▾</span></a>
      <ul class="sub-menu">
        <li>
          <a href="/d/">D</a>
        </li>
        <li>
          <a href="/e/">E</a>
        </li>
        <li>
          <a href="/f/">F</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  let dropbtns = document.getElementsByClassName('dropbtn');
  for (let dropbtn of dropbtns) {
    dropbtn.onclick = () => {
      dropbtn.nextElementSibling.classList.toggle('show');
      let expanded = dropbtn.getAttribute('aria-expanded');
      dropbtn.setAttribute('aria-expanded', expanded == 'true' ? 'false' : 'true');
    };
  }
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
      let dropbtns = document.getElementsByClassName('dropbtn');
      for (let dropbtn of dropbtns) {
        dropbtn.nextElementSibling.classList.remove('show');
        dropbtn.setAttribute('aria-expanded', 'false');
      }
    }
  };
</script>

Answered By - GuppyCat

Answer Checked By - Candace Johnson (PHPFixing Volunteer)