Аккордеон переключает только первый элемент

У меня есть код ниже в моем index.php, отображается только первый элемент в аккордеоне. Например: когда я нажимаю «Статус» или «Повторно», я ожидаю подменю выбранного элемента, но вместо этого получаю результат из первого списка. Это Позиция.

<style>
  ul .sub_main{
    cursor: pointer;
  }
  .nested {
    display: none;
  }
  .active {
    display: block;
  }

</style>
    <ul class = "sidebar-menu" data-widget = "tree">
      <li class = "header">MANAGE</li>
      
      <li class = "sub_main"><i class = "fa fa-users"></i><span>Positions</span><i class = "fa fa-plus" aria-hidden = "true"></i>
        <ul class = "nested">
          <li class = ""><a href = "#"><i class = "fa fa-users"></i> <span>a link 1</span></a></li>
          <li class = ""><a href = "#"><i class = "fa fa-users"></i> <span>a link 2</span></a></li>
        </ul>
      </li>
      
      <li class = "sub_main"><i class = "fa fa-tasks"></i> <span>Status</span><i class = "fa fa-plus" aria-hidden = "true"></i>
        <ul class = "nested">
          <li class = ""><a href = "#"><i class = "fa fa-tasks"></i> <span>b link 1</span></a></li>
          <li class = ""><a href = "#"><i class = "fa fa-tasks"></i> <span>b link 2</span></a></li>
          <li class = ""><a href = "#"><i class = "fa fa-tasks"></i> <span>b link 3</span></a></li>
        </ul>
      </li>
      <li class = "sub_main"><i class = "fa fa-tasks"></i> <span>Repeated</span><i class = "fa fa-plus" aria-hidden = "true"></i>
        <ul class = "nested">
          <li class = ""><a href = "#"><i class = "fa fa-tasks"></i> <span>c link 1</span></a></li>
          <li class = ""><a href = "#"><i class = "fa fa-tasks"></i> <span>c link 2</span></a></li>
        </ul>
      </li>
    </ul>

это скрипт для отображения элемента аккордеона при нажатии.

var toggler = document.getElementsByClassName("sub_main");
  var i;

  for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
        this.parentElement.querySelector(".nested").classList.toggle("active");
    });
  }