JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="doclist">
        	<table>
            	<tr>
                	<td>
                    	<h2>Documents</h2>
                        <ul id="documents">
                            <li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
                            <li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
                            <li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
                            <li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
                            <li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
                        </ul></div><div id="wrapper">
                    </td>
                    <td align="left">
                    	<table>
                        	<tr>
                            	<td> <ul id="tabs"><!-- Tabs go here --> </ul></td>
                            </tr>
                            <tr> 
                            	<td colspan="5" align="center" width="1000px"><div id="content"><!-- Tab content goes here --></div>
                            	</td>
                            </tr>
                        </table>
                    </td>
                </tr>
             </table>
        </div>  			
    </body>

JavaScript

$(document).ready(function(e) {
				var stack = new Array();
                $("#documents a").click(function() {
					addTab($(this));
				});
				
				function addTab(link) {
					var name=$(link).attr("rel");
					if($("#"+name).length==0){
						// add new tab and related content
						stack.push(name);
						$("#tabs").append("<li class='active' style='display:inline'><button class='btnContent' id='"+name+"'>"+$(link).attr("rel")+"</button> <button class='btnClass'>X</button></li>").show();
						$("#content").html("Hello From "+name);
					}
				}
				
				$(document).on('click', '.btnClass', function(){
					closeTab($(this));
				});
				
				function closeTab(link){
					var name=$(link).siblings().attr("id");
					var statusNull = true;
					for(var counter=stack.length-1;counter>=0;counter--){
						if(stack[counter]==name){
							stack[counter]=null;	
						}	
					}
					for(var counter=stack.length-1;counter>=0;counter--){
						if(stack[counter]!=null){
							$("#content").html("Hello From "+stack[counter]);
							statusNull = false;
							break;	
						}
					}
					
					if(statusNull == true){
						$("#content").html("");	
					}
					$("#"+name).parent().remove();
				}
				
				$(document).on('click', '.btnContent', function(){
					addContent($(this));
				});
				
				function addContent(link){
					var name=$(link).attr("id");
					stack.push(name);
					$("#content").html("Hello From "+name);
				}
				
            });