Куда тут вставить this, чтоб открывалось субменю только того элемента, в котором лежит данная стрелочка?

Question

[trenton]

На которую кликают. Контекст самой стрелочки ясен, наверно надо обратиться к ее родителю?

jQuery(".burger-menu").on("click", function() {
  jQuery(".header-burger-menu").toggleClass("d-block"); 
  jQuery(".logo").toggleClass("d-none");
})

if (jQuery("#header-burger-menu li").hasClass("menu-item-has-children")) {
  jQuery(".menu-item-has-children").prepend('<span class="current-open"><i class="fas fa-caret-down"></i></span>');
}

jQuery(".current-open").on("click", function() {
  jQuery(this).toggleClass("current-rotate"); 
  jQuery(".sub-menu").toggleClass("d-block");  
})

Рукописного html нету, т.е. он wordpress-овский, создается автоматически, я только дал id. Струкура на скрине.
Стили, на случай, если надо, они не доделаны - так, набросок. Сначала надо чтоб работало, а потом уже красота.

.fa-bars{
    font-size: 1.5rem;
}

.header-burger-menu{
    position: absolute;
    background: white;
    z-index: 99;
    left: 0;
   min-width: 300px;
    text-align: start;
   padding-left: 10%;
    overflow-y: auto;
}

ul#header-burger-menu {
    position: relative;
    max-height: 100vh;
    overflow: auto;
}

ul#header-burger-menu li{
    padding: 6%;
}
li.current_page_item {
    display: none;
}

.header-burger-menu .sub-menu {   
   font-size: .9rem;
   padding-left: 5%;
   display: none;   
}

.sub-menu li:first-child,#header-burger-menu li:first-child{
    margin-top: 10px;
}

.current-open{
   /* display: none;*/
    color: #000; 
    position: absolute; 
    right: 5%;  
}
.current-rotate{
    transform: rotate(180deg);
}