JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu1" class="hmenu">
    <ul>
        <li><a href="#">Item1</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
                <li><a href="#">SubItem2</a> </li>
                <li><a href="#">SubItem3</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br style="clear: left" />
</div>

CSS

.active > a {
    color:red;
}

JavaScript

$(document).ready(function () {
        $('a').click(function () {
            //removing the previous selected menu state
            $('.hmenu').find('li.active').removeClass('active');
            //adding the state for this parent menu
            $(this).parents("li").addClass('active');

        });
    });