JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
	<p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i>&nbsp;CATEGORY</p>
	<ul class="dropdown-menu">
		<li class="dropdown-submenu">
			<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
			<ul class="dropdown-menu opened">
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li class="dropdown-submenu">
					<a class="test" href="#">Another dropdown <span class="caret"></span></a>
					<ul class="dropdown-menu opened">
						<li><a href="#">3rd level dropdown</a></li>
						<li><a href="#">3rd level dropdown</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a tabindex="-1" href="#">HTML</a></li>
		<li><a tabindex="-1" href="#">CSS</a></li>
		<li class="dropdown-submenu">
			<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
			<ul class="dropdown-menu closed">
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li class="dropdown-submenu">
					<a class="test" href="#">Another dropdown <span class="caret"></span></a>
					<ul class="dropdown-menu closed">
						<li><a href="#">3rd level dropdown</a></li>
						<li><a href="#">3rd level dropdown</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

CSS

.closed{display:none;}
.opened{display:block;}

JavaScript

$(function(){

	$('.dropdown-submenu a.test').on("click", function(e){	
		
		var ul = $(this).next('ul');
		if(ul.hasClass('opened')){
			ul.removeClass('opened').addClass('closed');
		}else{
			ul.addClass('opened').removeClass('closed');
		}
		if($(this).parents('ul').length == 1){
			$(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
		}
		
		e.stopPropagation();
		e.preventDefault();
	});

});