JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <ul>
        <li><a id="tab-1" href="#tabs-1">Tab 1</a>

        </li>
        <li><a id="tab-2" href="#tabs-2">Tab 2</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content Tab 1 <br /><br /><a href="#" id="openNewTabFrom1">Add new Tab</a><br /><br />when closing the new tab come back on this tab (should be).

        </p>
    </div>
    <div id="tabs-2">
        <p>Content Tab 2 <br /><br /><a href="#" id="openNewTabFrom2">Add new Tab</a><br /><br />when closing the new tab come back on this tab (should be).

        </p>
    </div>
</div>

JavaScript

var tabs = $('#tabs').tabs({
    select: function (event, ui) {}
});

$("#openNewTabFrom1, #openNewTabFrom2").click(function () {
    var tabs = $("#tabs").tabs();
    removetab('tabs-3');
    addTab('tabs-3', this.id.replace("openNewTabFrom", ""));
    tabs.tabs("refresh");
});

function addTab(newTabId, triggerId) {
     li = '<li><a href="#tabs-3">NEW TAB</a><span id="closer" openerid="' + triggerId + '" class="ui-icon ui-icon-close" role="presentation">close</span></li>',
    id = "tabs-3",
    websiteframe = '<iframe src="http://www.mamma.com" width="100%" height="800px" frameBorder="0">Your browser does not support IFRAME</iframe>';

    tabs.find(".ui-tabs-nav").append(li);
    tabs.find("#tabs-3").remove();
    tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
    tabs.tabs("refresh");
    $("#tabs").tabs({
        active: 2
    });
}

function removetab(tab_id) {
    // Remove the tab
    var tab = $("#tabs").find(".ui-tabs-nav li:eq(2)").remove();
    // Refresh the tabs widget
    $("tabs").tabs("refresh");
}

// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
    var theTab = $(this).attr('openerid');
    alert(theTab);
    $("#tab-" + theTab).click();
    
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
});