title: Multiple dropdown menus using same JS code
body: <p>I have a simple drop-down menu using JavaScript.</p>
  
  <pre><code>&lt;div id="show-nav" class="dropdown"&gt;
  
      &lt;div id="dropdown" onClick="myFunction()"&gt;Menu Name&lt;/div&gt;
  
            &lt;div id="myDropdown" class="dropdown-content"&gt;
  
                  &lt;a href="#option1"&gt;Option 1&lt;/a&gt;
                  &lt;a href="#option2"&gt;Option 2&lt;/a&gt;
                  &lt;a href="#option3"&gt;Option 3&lt;/a&gt;
  
            &lt;/div&gt;
  
         &lt;/div&gt;
  </code></pre>
  
  <p>And the JS:</p>
  
  <pre><code>&lt;script&gt;
  
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
  if (!event.target.matches('#dropdown')) {
  
  var dropdowns = document.getElementsByClassName("dropdown-content");
  var i;
  for (i = 0; i &lt; dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
  }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have multiple copies of the same menu in several adjacent divs. With this code, the menu works in the first element, but if I try to toggle it in the second, it only drops down in the first. How can I make this work for several menus on a single page? </p>