JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="site-navigation" class="main-navigation">
    <div id="primary-menu" class="menu">
    <ul>
        <li class="page_item page-item-703"><a href="/blog/">Blog</a></li>
        <li class="page_item page-item-701"><a href="/front-page/">Front Page</a></li>
        <li class="page_item page-item-2"><a href="/sample-page/">Sample Page</a></li>
        <li class="page_item page-item-6 page_item_has_children"><a href="/about/">About The Tests</a>
            <ul class='children'>
                <li class="page_item page-item-1133"><a href="/about/page-image-alignment/">Page Image Alignment</a></li>
                <li class="page_item page-item-1134"><a href="/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
                <li class="page_item page-item-501"><a href="/about/clearing-floats/">Clearing Floats</a></li>
                <li class="page_item page-item-155"><a href="/about/page-with-comments/">Page with comments</a></li>
                <li class="page_item page-item-156"><a href="/about/page-with-comments-disabled/">Page with comments disabled</a></li>
            </ul>
        </li>
        <li class="page_item page-item-174 page_item_has_children"><a href="/level-1/">Level 1</a>
            <ul class='children'>
                <li class="page_item page-item-173 page_item_has_children"><a href="/level-1/level-2/">Level 2</a>
                    <ul class='children'>
                        <li class="page_item page-item-172"><a href="/level-1/level-2/level-3/">Level 3</a></li>
                        <li class="page_item page-item-746"><a href="/level-1/level-2/level-3a/">Level 3a</a></li>
                        <li class="page_item page-item-748"><a href="/level-1/level-2/level-3b/">Level 3b</a></li>
                    </ul>
                </li>
                <li class="page_item page-item-742"><a href="/level-1/level-2a/">Level 2a</a></li>
                <li class="page_item page-item-744"><a...

CSS

.active, .active a {
	color: red;
}
.sub-nav-toggle {
	cursor: pointer;
}

JavaScript

console.clear();

var x = document.body.querySelectorAll('.page_item_has_children > a');
var index = 0;
for (index = 0; index < x.length; index++) {
	var navArrow = document.createElement('span');
	navArrow.className = 'sub-nav-toggle';
	navArrow.innerHTML = '<b>[toggle]</b>';
	x[index].parentNode.insertBefore(navArrow, x[index].nextSibling);
}

var elements = document.querySelectorAll('.sub-nav-toggle');

for(var i in elements) {
	if(elements.hasOwnProperty(i)) {
		elements[i].onclick = function() {
			this.parentElement.querySelector('.children').classList.toggle("active");
		}
	}
}