Почему не получается присвоить тегу класс?

Question

[Timofey4]

Есть меню, сделанное под бургер. Пытаюсь полностью его адаптировать.
Код самого меню:

<div class="mobile_catalog">
			    <ul id="menu_main" class="catalogbtn"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><span>Каталог игрушек</span>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-175"><span>Куклы</span>
	<ul class="sub-menu">
		<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-112"><a href="http://u1431922.isp.regruhosting.ru/product-category/robots/">Роботы</a></li>
	</ul>
</li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-85"><a href="http://u1431922.isp.regruhosting.ru/product-category/constructors/">Конструкторы</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://u1431922.isp.regruhosting.ru/about/">О нас</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://u1431922.isp.regruhosting.ru/news/">Новости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://u1431922.isp.regruhosting.ru/contacts/">Контакты</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://u1431922.isp.regruhosting.ru/delivery/">Оплата и доставка</a></li>
</ul>			    <div class="vk"><a href="https://vk.com/clubmalenkiyprince"><img src="http://u1431922.isp.regruhosting.ru/wp-content/themes/malenkiy-prince/assets/img/vk_logo.png"></a></div>
			</div>

Вот скрипт который у меня не получается заставить работать, а точнее последние 3 строчки:

let menuBtn = document.querySelector('.menu-btn');
    let menu = document.querySelector('.mobile_menu');
    let menuClose = document.querySelector('.menu_close');
    let body = document.querySelector('body');
    $(function (){
        $('.menu-item-has-children').prepend('<span />');
        $('.menu-btn').click(function(){
            $('.menu-item-has-children > a').each(function(){
                let textA = $(this).text();
                $(this).siblings('span').text(textA);
                $(this).remove();
            });
        });
    });
    
    menuBtn.addEventListener('click', function(){
	    menu.classList.toggle('is-openned');
	    body.classList.toggle('no-scrolled');
    })
    menuClose.addEventListener('click', function(){
        menu.classList.toggle('is-openned');
        body.classList.toggle('no-scrolled');
    })
    
    let li = document.querySelector('.menu-item-has-children > span');
    li.addEventListener('click', function(){
        li.classList.toggle('test');
    });

Весь скрипт за исключением последних 3 строк работает, когда нажимаю на span нет никакой реакции. Мне нужно, чтобы к спану присваивался этот класс. Буду очень благодарен за помощь!

Comments

[TheOnlyFastCoder2]

ваша верстка ужасна и использовать jq(сплошной мусор) смешивая с ванильным js , капец вы извращенец .
Может web-ПРОГРАММИРОВАНИЕ это не ваше ?

[Антон Литвиненко]

TheOnlyFastCoder2, разве не очевидно, что это не его верстка а стандартное вордпрессовское меню? Это прям камень в разработчиков)))
a js скорее всего c просторов интернета

[Timofey4]

Антон Литвиненко, Всё абсолютно верно. Можете подсказать именно по-моему вопросу? Просто сам никак не могу ответ найти.

[Антон Литвиненко]

Timofey4, если вопрос в последних трех строчках, то там как минимум querySelectorAll и потом вешать на него клик в цикле