JSFiddle - React, Tailwind, and code Playground

HTML

<ul><li class='prd'><a href="">Button</a></li></ul>

	<ul id="ins-type">
		<li><a href="">A</a>
			<ul class="the-ins">
				<li><div class="ins-type-desc">sample sample A</div></li>
				<li><a href="">A.1</a>
					<ul class="the-ins-desc">
						<li>
							<div>LOREM DESCRIPTION</div>
						</li>
					</ul>
				</li>
				<li><a href="">A.2</a>
					<ul class="the-ins-desc">
						<li>
							<div>LOREM DESCRIPTION</div>
						</li>
					</ul>
				</li>
				<li><a href="">A.3</a>
					<ul class="the-ins-desc">
						<li>
							<div>LOREM DESCRIPTION</div>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="">B</a>
			<ul class="the-ins">
				<li><div class="ins-type-desc">sample sample B</div></li>
				<li><a href="">b.1</a>
					<ul class="the-ins-desc">
						<li>
							<div>LOREM DESCRIPTION</div>
						</li>
					</ul>
				</li>
				<li><a href="">b.2</a>
					<ul class="the-ins-desc">
						<li>
							<div>LOREM DESCRIPTION</div>
						</li>
					</ul>
				</li>
			</ul>
		</li>	
		<li><a href="">C</a>
			<ul class="the-ins">
				<li><div class="ins-type-desc">sample sample C</div></li>
				<li><a href="">b.1</a>
					<ul class="the-ins-desc">
						<li>
							<div>LOREM DESCRIPTION</div>
						</li>
					</ul>
				</li>
			</ul>
		</li>				
	</ul>

CSS

#ins-type{
	display: none;
	padding:0;
}

#ins-type .the-ins{
	display: none;
	padding:0;
}
.the-ins-desc{
	display: none;
	padding:0;
}

JavaScript

$(document).ready(function() {


$("#ins-type").appendTo("li.prd");

$("li.prd>a").click(function(event){
    event.preventDefault();
    $("#ins-type").slideToggle();
});


$("#ins-type>li>a").stop().click(function(event){
    event.preventDefault();

    if($(this).parent().hasClass("act")){

       $(this).parent().find('ul').find(".act").find('.the-ins-desc').slideUp().parent().removeClass("act");




        $(this).parent().find("ul.the-ins").slideUp();
        $(this).parent().removeClass("act");

    }else{
        $("#ins-type>li").removeClass("act").find("ul.the-ins").slideUp();
        $(this).parent().addClass("act");
        $(this).parent().find("ul.the-ins").slideDown(function(){



                $(this).find('li').children('a').click(function(event){
                    event.preventDefault();
                    if($(this).parent().hasClass("act")){
                        $(this).parent().removeClass("act");
                        $(this).parent().find("ul").slideUp();
                        console.log("clise");
                                            return false;
                    }else{
                        $(".the-ins>li").removeClass("act").find('.the-ins-desc').slideUp();
                        $(this).parent().addClass("act").find("ul").stop().slideDown();
                        console.log("open");
                                            return false;
                    }
                    return false;
                });

        });
    }
});





});