Estou criando um menu desktop/mobile que será replicado algumas vezes na pagina, no entanto meu código apresenta um bug que ao clicar em abrir um acaba abrindo todos. Segue o codigo
<div class="nav-section">
<div class="menu-button-section">Mobile Menu</div>
<ul class="menu-section active-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
A classe "active-menu" possui apenas um visibility:hidden; para abrir e fechar o menu, o script feito consegue delegar e identificar em qual botão está clicando, no entanto não identifica qual o menu que está trocando a classe tendo em vista que esse html vai ser replicado algumas vezes
$(document).on('click', '.menu-button-section', function () {
if( $('.menu-section').hasClass('active-menu')){
$('.menu-section').removeClass('active-menu');
} else {
$('.menu-section').addClass('active-menu');
} });
O bug acontece nessa linha, aonde ja tentei de algumas formas transformar esse ".menu-section" em um target delegado, mas sem sucesso
$('.menu-section').removeClass('active-menu');
this
do Javascript?