Dropdown menu code not quite right on mobile

Question

I have built a menu on this page that is live: https://boys-cry.com/ and it was working fine until I added the mobile background content on a different section and duplicated the below code and one instance is now hidden from the desktop and the other is hidden from the mobile view so that the correct background content appears on each device. But it seems to have stopped the menu functions working properly.

On the desktop, when you click the logo the menu shows, but the We and Client items in the dropdown do not expand when clicked - they are meant to show further text.

On the mobile when you click the logo nothing happens and its meant to show the menu and then subsequent text dropdowns.

Im sure I'm missing a small bit of code but cant see what it is. Please help! Thank you

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      let active = document.querySelectorAll(".accordion-div .accordion.active");
      for (let j = 0; j < active.length; j++) {
        active[j].classList.remove("active");
        active[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

/* 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');
      }
    }
  }
}

.accordion {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.accordion:hover {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.accordion:focus {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.panel {
  color: black;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #00000000;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 16px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 0px 0px 0px 10px;
  margin: 0px 0px 0px 11px;
}

.link {
  background-color: #00000000;
  color: black;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 6px 0px 6px 5px;
}

.link:hover {
  background-color: #00000000;
  color: black;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 6px 0px 6px 5px;
}

hr.solid {
  border-left: none;
  border-right: none;
  border-top: 1px solid #000000;
  border-bottom: none;
  max-width: 200px;
  margin-left: 15px;
  padding-top: 5px;
}

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

.dropbtn {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
  animation-direction: pulse;
  animation-name: logo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.dropbtn:hover {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
  animation-direction: pulse;
  animation-name: logo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.dropbtn:focus {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
  outline: none;
  animation-direction: pulse;
  animation-name: logo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes logo {
  from {
    width: 100px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
    transform: scale(1.15);
  }
}

#myDropdown>div {
  display: none
}

#myDropdown.show>div {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown">

      <div>
        <hr class="solid">
        <div class="accordion-div">
          <button class="accordion"><span class="faq__question-heading">We</span></button>
          <div class="panel">
            <p style="padding:18px 0;">We are Content Creators.<br>We cultivate desire and change through story telling.</p>
          </div>
          <hr class="solid">
          <button class="accordion"><span class="faq__question-heading">Clients</span></button>
          <div class="panel">
            <p style="padding:18px 0;">Red Bull . Nike . Andrew Cotton . Dynamo . Coca Cola . Nowness . Selfridges . Levis . Liverpool FC . England Rugby . Rimowa . GQ</p>
          </div>
          <hr class="solid">
          <button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:[email protected]">Get In Touch</a></span></button>
          <div class="panel"></div>
        </div>
        <hr class="solid">
      </div>