Plusieurs button qui ouvre le premier (HTML + CSS)

Voici le code:

 <style>
                                             
.dropbtn {
    background-color: #240073;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #240073;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: WHITE;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


.dropdown a:hover {background-color: #240073}

.show {display:block;}
</style>                                                              
 <div class="dropdown">
                                                                                                                               
  <button onclick="myFunction()" class="dropbtn">
                                                                 HOME                                                           
  </button>
       
  <div class="dropdown-content" id="myDropdown">
                                                                     <a value="Lien NHL" href="#pre" rel="nofollow" target="_blank">PROFIL</a>    <a value="Lien NHL" href="#sa" rel="nofollow" target="_blank">MESSAGES</a> <a value="Lien NHL" href="#se" rel="nofollow" target="_blank">MEMBRES</a>     <a value="Lien NHL" href="#se" rel="nofollow" target="_blank">GROUPES</a>                                          
  </div>
           .         
 </div>
          <script>
/* 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 if the user clicks outside of it
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');
      }
    }
  }
}
</script>

Question : Jutilise 4 fois de suite ce code (sauf avec des listes differente). Le probleme est que si je click le Button2 pour ouvrir cette list, le click ouvre la liste du button1... et ainsi de suite. Comment faire pour que chaque button ouvre leur liste respective?

Merci d'avance