JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<ul id="list">
			<li id="1"><a href="#">1</a></li>
			<li id="2"><a href="#">2</a></li>
			<li id="3"><a href="#">3</a></li>
			<li id="4"><a href="#">4</a></li>
			<li id="5"><a href="#">5</a></li>
		</ul>
		<table class="table table-hover" id="table_content"></table>

<div class="test">You slide down a row with content xyz</div>

	</body>

CSS

tr {
    display:block;
    width:100%;
}
.test {
    display:none;
}

JavaScript

$(function(){
    $('#list').on('click', 'li', function(){
        var id = this.id
        var table_content = ""
        if (id=='1'){
            for( var i = 0; i <4;i++){
                table_content += "<tr>"
                for(var j = 0;j<4;j++) {
                    table_content +="<td>"+j+"</td>"
                }
                table_content += "</tr>"
            }
        }
        
        if (id=='2'){
            for( var i = 0; i <4;i++){
                table_content += "<tr>"
                for(var j = 5;j<9;j++) {
                    table_content +="<td>"+j+"</td>"
                }
                table_content += "</tr>"
            }
        }
        
        if (id=='3'){
            for( var i = 0; i <4;i++){
                table_content += "<tr>"
                for(var j = 10;j<15;j++) {
                    table_content +="<td>"+j+"</td>"
                }
                table_content += "</tr>"
            }
        }
        
        if (id=='4'){
            for( var i = 0; i <4;i++){
                table_content += "<tr>"
                for(var j = 15;j<19;j++) {
                    table_content +="<td>"+j+"</td>"
                }
                table_content += "</tr>"
            }
        }
        
        if (id=='5'){
            for( var i = 0; i <4;i++){
                table_content += "<tr>"
                for(var j = 25;j<29;j++) {
                    table_content +="<td>"+j+"</td>"
                }
                table_content += "</tr>"
            }
        }
        
        $("#table_content").html(table_content)
    });
    
});

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});