JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<!-- jQuery tabs container -->
<div id='tabs'>
    <ul>
        <li><a href='#tab-1'>Extrusion #1</a></li>
        <li><a href='#tab-add' id='tab-add-button'>Add</a></li>
    </ul>
    <div id='tab-1'>
        tab-1
    </div>
    <div id='tab-add'></div>
</div>

JavaScript

$(document).ready(function() {

    $("#tabs").tabs();
    
    $("#tab-add-button").click(function(event) {
        event.preventDefault();
        var num_tabs = $("#tabs").tabs("length");
        var tab_id = "tab-" + num_tabs;
        var tab_url = "#" + tab_id;
        var tab_label = "Extrusion #" + num_tabs;
        var tab_index = num_tabs - 1;

        $("#tabs").tabs("add", tab_url, tab_label, tab_index);
        $("#tabs").tabs("select", tab_index);      
    });
    
});