JSFiddle - React, Tailwind, and code Playground

by mcannon

HTML

<div class="container">
	<a href="javascript:;" id="btnAddPage" role="button">Add Page</a>  
	<ul id="pageTab" class="nav nav-tabs">
		<li class="active"><a href="#page1" data-toggle="tab">Page1</a></li>
	</ul>
	<div id="pageTabContent" class="tab-content">
		<div class="tab-pane active" id="page1">
		Content Page1
		</div>
	</div>

CSS

.nav-tabs > li .close {
    margin: -3px 0 0 10px;
    font-size: 18px;
    padding: 5px 0;
    float: right;
}

.nav-tabs > li a[data-toggle=tab] {
    float: left!important;
}

JavaScript

$(doument).ready()
var pageNum = 1;

/**
* Add a Tab
*/
$('#btnAddPage').click(function() {
    pageNum++;
    $('#pageTab').append(
        $('</pre>
<ul>
    <li><a href="#page' + pageNum + '">' +
    'Page ' + pageNum +
    '<button class="close" title="Remove this page" type="button">×</button>' +
    '</a></li>
</ul>
<pre>
 
'));
 
    $('#pageTabContent').append(
        $('</pre>
<div class="tab-pane" id="page' + pageNum +         '">Content page' + pageNum + '</div>
<pre>
'));
 
    $('#page' + pageNum).tab('show');
});
 
/**
* Remove a Tab
*/
$('#pageTab').on('click', ' li a .close', function() {
    var tabId = $(this).parents('li').children('a').attr('href');
    $(this).parents('li').remove('li');
    $(tabId).remove();
    reNumberPages();
    $('#pageTab a:first').tab('show');
});
 
/**
 * Click Tab to show its contents
 */
$("#pageTab").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
});
 
/**
* Reset numbering on tab buttons
*/
function reNumberPages() {
    pageNum = 1;
    var tabCount = $('#pageTab > li').length;
    $('#pageTab > li').each(function() {
        var pageId = $(this).children('a').attr('href');
        if (pageId == "#page1") {
            return true;
        }
        pageNum++;
        $(this).children('a').html('Page ' + pageNum +
            '<button class="close" title="Remove this page" type="button">×</button>');
    });
}