Multiple Drop Down Button List JavaScript

Question

I was just wondering if any of you guys have a solution that can help me add multiple drop down buttons to one page. I am having problems with the JavaScript part I believe. I want to be able to embed at least two or more drop down buttons on the same page.

When I do so with the current code the pull down menu goes down for the first element when you go to click on the second button.

Code snippet

    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
    
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

    .dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }


    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }


    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    
    .dropdown-content a:hover {background-color: #ddd}
    
    
    .show {display:block;}
    

<div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
           <a href="#">Link 1</a>
           <a href="#">Link 2</a>
           <a href="#">Link 3</a>
        </div>
       </div>

        <div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
           <a href="#">Link 1</a>
           <a href="#">Link 2</a>
           <a href="#">Link 3</a>
        </div>
       </div>

    

Answer 1

make 2 separate function for each dropdown

function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
function myFunction2() {
        document.getElementById("myDropdown2").classList.toggle("show");
    }
    
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }


    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }


    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    
    .dropdown-content a:hover {background-color: #ddd}
    
    
    .show {display:block;}

<div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
           <a href="#">Link 1</a>
           <a href="#">Link 2</a>
           <a href="#">Link 3</a>
        </div>
       </div>

        <div class="dropdown">
          <button onclick="myFunction2()" class="dropbtn">Dropdown</button>
         <div id="myDropdown2" class="dropdown-content">
           <a href="#">Link- 1</a>
           <a href="#">Link- 2</a>
           <a href="#">Link- 3</a>
        </div>
       </div>