Side by Side clickable dropdowns - only one working

[HKellner]

Hi, I used the W3S "how to create a dropdown", but that exercise only ever includes one button dropdowns and I want at least two side by side. I set up my page for this forum question: https://zandkantiques.com/test.html

Please note the buttons show up on mobile devices only, so you have to be inspecting the page as a phone. Here is the code I'm using for the buttons:

<!--mobile nav-->
        <div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Fiesta Colors&nbsp;&#x25BE;</button>
        
        <div id="myDropdown" class="dropdown-content">
    <a href="#" target="_blank">Red&nbsp;&raquo;</a>
    <a href="#"  target="_blank">Yellow&nbsp;&raquo;</a>
    <a href="#" target="_blank">Blue&nbsp;&raquo;</a>
    <a href="#" target="_blank">Ivory&nbsp;&raquo;</a>
    <a href="#" target="_blank">Green&nbsp;&raquo;</a>
    <a href="#" target="_blank">Turquoise&nbsp;&raquo;</a>
    <a href="#">'50s Colors&nbsp;&raquo;</a>
    <a href="#" target="_blank">Medium Green&nbsp;&raquo;</a>        
  </div>
        </div>
        
        <div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Pottery Lines&nbsp;&#x25BE;</button>
        <div id="myDropdown" class="dropdown-content">
    <a href="#" target="_blank">Fiesta Kitchen Kraft&nbsp;&raquo;</a>
    <a href="#"  target="_blank">HLC Harlequin&nbsp;&raquo;</a>
    <a href="#" target="_blank">HLC Riviera&nbsp;&raquo;</a>
    <a href="#" target="_blank">HLC Decalware&nbsp;&raquo;</a>
  </div>
    </div>
 

and the JS that was included from the lesson:

        
    <script type="application/javascript">
/* 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;
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>    

 

I don't think the css has anything to do with my problem, so am not including any css here.

Thanks a zillion in advance!!!!!!!