JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">List</a></li>
    </ul>

    <div id="fragment-1">

    </div>


</div>

<button id="add_tab">Add Tab</button>

JavaScript

$(document).ready(function() {
        var tabs = $("#container-1").tabs();
            var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
            tabCounter = 2;

        $('#add_tab').click( function(){   
            var label = 'New',
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
            tabContentHtml = 'hi';
            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        });
        $('#new').click( function(){
            $tabs.tabs('select', 2);
        });

    });