Помощь в делегировании

Имеется верстка:

<div class=" p-b-30 m-b-20">
        <ul class="collection-flatten no-list-style text-center">
              <li class="p-t-10 mobile-menu-sport">
                <span class="btn-plus-mobile"></span>
                <div class="wrapper-submenu hide">
                </div>
              </li>

              <li class="p-t-10">
                <span class="btn-plus-mobile"></span>
                <div class="wrapper-submenu hide">
                </div>
              </li>
        </ul>
      </div>

стили:

.wrapper-submenu {
  display: flex;
  flex-direction: column;
}
.btn-plus-mobile {
  &::before {
    content: "\ff0b";
    padding: 10px 16px 10px 20px;
    position: relative;
    display: inline-block;
    font-size: 20px;
    margin-left: -22px;
    width: 22px;
    cursor: pointer;
  }
}
.mobile-menu-links {
  padding: 10px 20px;
  font-size: 20px;
}

Нужно, чтобы по клику "btn-plus-mobile", открывался блок "wrapper-submenu".

 $('.btn-plus-mobile').click(function() {
    $('.wrapper-submenu').toggleClass('hide');
  });  

^ Данное решение открывает блоки вместе, не важно по какому "плюсу" был клик.

const mobileMenuCus = document.querySelector('.mobile-menu-custom');
  mobileMenuCus.addEventListener('click', (e) => {
    const btnPlus = e.target.closest('li');
    const btnShow = btnPlus.querySelector('.btn-plus-mobile');

    if(!btnPlus) return;
});

^ Отлавливает отдельные плюсы, но дальше не пойму как выводить отдельные блоки. Буду премного благодарен за помощь. :]