JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <ul class="form-nav">
        <li><a href="#a-1">AAA</a></li>
        <li><a href="#a-2">BBB</a></li>
    </ul>
</form>

<form class="hidden" id="a-1">
    <ul class="form-nav">
        <li><a href="#a-1-1">aaa</a></li>
        <li><a href="#a-1-2">bbb</a></li>
    </ul>
</form>

<form class="hidden" id="a-1-1">
    <p>A-1-1</p>
</form>

<form class="hidden" id="a-1-2">
    <p>A-1-2</p>
</form>

<form class="hidden" id="a-2">
    <ul class="form-nav">
        <li><a href="#a-2-1">111</a></li>
        <li><a href="#a-2-2">222</a></li>
    </ul>
</form>

<form class="hidden" id="a-2-1">
    <p>A-2-1</p>
</form>

<form class="hidden" id="a-2-2">
    <p>A-2-2</p>
</form>

CSS

.hidden {
    display: none;
}

JavaScript

$(document).on("click", "ul.form-nav a", function(event) {
    event.preventDefault();
    var id = event.target.href.replace(/^[^#]+/, "");
    console.log("Going to: " + id);
    $('form.hidden').not(id).hide();
    $(id).show().focus();
});