JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="common.css" rel="stylesheet" />
</head>
<body>
    <div>
        <ul>
            <li class="gtab">
                <a><span title="Email">Email</span></a>
            </li>
            <li class="gtab">
                <a><span title="system">system</span></a>
            </li>
        </ul>
    </div>
    <div class="tabbable" id="tabpanel">
        <ul id="mainTab" class="nav nav-tabs"></ul>
        <div class="tab-content">
        </div>
    </div>
   <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="common.js"></script>
</body>
</html>

CSS

#mainTab li span {
    position: relative;
    top: -31px;
    left: 5px;
}

JavaScript

$("#mainTab").on("click", "a", function (e) {
    e.preventDefault();
    //if (!$(this).hasClass('add-contact')) {
    $(this).tab('show');
    //}
})
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

$('.gtab').click(function (e) {
    console.log('tset');
    //e.preventDefault();
    e.stopPropagation();
    var id = $("#mainTab").children().length + 1; //think about it ;)
    var tabId = 'contact_' + id;
    var tabtitle = $(this).find('span').html();

    //$('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('<li><a href="#contact_' + id + '">' + tabtitle + '</a> <span> x </span></li>').appendTo('#mainTab');
    $('#tabpanel .tab-content').append('<div style="height:400px;" class="tab-pane" id="' + tabId + '">' + tabtitle + '</div>');
    //$('#tabpanel .tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
    $('#mainTab li:nth-child(' + id + ') a').click();
});