JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
						<li><a class="has-dropdown" href="">Link</a>
							<ul>
								<li><a href="">Sub-Link</a></li>
								<li><a href="">Sub-Link</a></li>
								<li><a href="">Sub-Link</a></li>
							</ul>
						</li>
						<li><a class="has-dropdown" href="">Link</a>
							<ul>
								<li><a href="">Sub-Link</a></li>
								<li><a href="">Sub-Link</a></li>
								<li><a href="">Sub-Link</a></li>
							</ul>
						</li>
					</ul>

CSS

.nav ul {display:none;}
.nav ul.show{display:block;}

JavaScript

$(document).ready(function(){
    // Dropdown menu
    var findDropdowns = document.querySelectorAll(".has-dropdown");
    for(var i = 0; i < findDropdowns.length; i++) {
        if(i == 0) {
            var dropdownId = "has-dropdown-1";
            findDropdowns[i].setAttribute("id", dropdownId);
        }else {
            var addOneToIndex = i + 1;
            dropdownId = "has-dropdown-" + addOneToIndex;
            findDropdowns[i].setAttribute("id", dropdownId);
        }
        var targetDropdown = document.getElementById(dropdownId);
        targetDropdown.onclick = dropdownTrigger;

    }
    function dropdownTrigger(e) {
        e.preventDefault();
        var showHideDropdown = e.target.nextElementSibling;
      
        showHideDropdown.setAttribute("class", "show");
    }
});