JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">One</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
    <li><a href="#">Two</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
    <li><a href="#">Three</a>
        <ul>
            <li><a href="">One</a></li>
            <li><a href="">Two</a></li>
        </ul>
    </li>
    <li><a href="#">Four</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
</ul>

CSS

ul ul{
    display:none;
}

li li{
    margin:0 0 0 25px;
}

JavaScript

$(document).ready(function(){
    $('li > a').click().toggle(
          function(){
            $(this).next('ul').css({'display':'block'})
        
    },
        function(){
            $(this).next('ul').css({'display':'none'})
                });
    
      });