JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

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

<div id="tabcontent">
    <p id="c21">Testsss</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() {
 
    
        $('#tabcontent p').hide().filter(':lt(1)').show();
        $("#tabul li").removeClass("ctab");
        $(".ntabs").filter(':lt(1)').addClass("ctab");
   
        $("#addtab").click(function() {
            
          var dataString = '';
                 $.ajax({
                  type: "POST",
                  url: "#",
                  data: dataString,
                  cache: false,
                  success: function(html)
                     {
                  $("#tabul").append(html);
 var closetab = '<a href="" id="23" class="close">&times;</a>';
 $("#tabul").append('<li id="23" class="ntabs">Tab Extra &nbsp;&nbsp;'+closetab+'</li>');
                  $("#tabcontent").append('<p id="c23">Tab Content </p>');
                  $("#tabul li").removeClass("ctab");
                  $("#23").addClass("ctab");
                  $("#tabcontent p").hide();
                  $("#c23").fadeIn('slow');      
                     }
                  });              
              return false;
  	    });
    
   
        $("#tabul").on("click",  ".ntabs", function() {
          var id = $(this).attr('id')
          $("#tabul li").removeClass("ctab");
          $(".ntabs").addClass("ctab");
            
            $("#tabul li").removeClass("ctab");
            $("#"+id).addClass("ctab");
            $("#tabcontent p").hide();
            $("#c"+id).fadeIn('fast'); 
        });
    
        $("#tabul").on("click", ".close", function() {
            var id = $(this).attr('id')
            $("#tabul li").removeClass("ctab");
            $("#tabcontent p").hide();
            $(this).parent().prev().addClass("ctab");
            $("#c"+id).prev().fadeIn('fast');
            $(this).parent().remove();
            $("#c"+id).remove();
            return false;
        });

});