JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
    
  <li id="t21" class="ntabs"> Tab Mysql id 21
    <a href="" id="close21" class="close">&times;</a>
  </li>
  <li id="t22" class="ntabs"> Tab Mysql id 22
    <a href="" id="close22" class="close">&times;</a>
  </li>  
</ul>

<div id="tabcontent">
    <p id="c21">Test</p>    
    <p id="c22">Test</p> 
</div>

CSS

#tabul {
    padding: 0;
    margin: 0;
    padding: 5px 0;
}
#tabul li {
    display: inline;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
    cursor: pointer;
}
.ntabs {
    background: #BDC7D5;
    margin-right: 1px;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    border: 1px solid #BDC7D5;
    padding: 5px 3px 5px 8px;
}
.add {
    padding: 5px 8px;
}
#addtab {
    font-size: 16px;
    text-decoration: none;
    position: relative;
    top: 2px;
    color: #333;
}
#addtab:hover {
    color: #999;
}
.ctab {
    background: #E7EDF6;
    position: relative;
    top: 2px;
    border-bottom-width: 0;
}
.close {
    text-decoration: none;
    color: #999;
    font-weight: bold;
    font-size: 14px;
    padding: 0 4px;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
}
.close:hover {
    background: #999;
    color: #333;
}
#tabcontent {
    border: 1px solid #BDC7D5;
    background: #E7EDF6;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #666;
    font-size: 24px;
}

JavaScript

$(function() {
    var total_tabs = 0;

    // initialize first tab
    total_tabs++;

    $("#addtab, #litab").click(function() {
        total_tabs++;
        $("#tabcontent p").hide();
        addtab(total_tabs);
        return false;
    });

    function addtab(count) {
        var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
        $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab Extra &nbsp;&nbsp;'+closetab+'</li>');
        $("#tabcontent").append('<p id="c'+count+'">Tab Content </p>');

        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");

        $("#t"+count).bind("click", function() {
            $("#tabul li").removeClass("ctab");
            $("#t"+count).addClass("ctab");
            $("#tabcontent p").hide();
            $("#c"+count).fadeIn('slow');
        });

        $("#close"+count).bind("click", function() {
            // activate the previous tab
            $("#tabul li").removeClass("ctab");
            $("#tabcontent p").hide();
            $(this).parent().prev().addClass("ctab");
            $("#c"+count).prev().fadeIn('slow');

            $(this).parent().remove();
            $("#c"+count).remove();
            return false;
        });
    }
});