JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Adding Tabs</title>
</head>
<body>
    <h1>Example of tabs() API inconsistency when adding a tab.</h1>
    <em>
        Initial Load represents Scenario 1 from
        <a href="http://forum.jquery.com/topic/tabs-inconsistency-between-build-of-tabs-and-add-of-a-tab">the report of this issue</a>
    </em>

    <hr>

    <div>
        <h2>Add Tab with:</h2>
        <button id="rebuild">Scenario 1 - Rebuild</button>
        <button id="add">Scenario 2 - add()</button>
    </div>

    <hr>

    <div id="tabMe">
        <ul>
            <li><a href="#tab1">One</a></li>
            <li><a href="#tab2">Two</a></li>
        </ul>

        <div class="groupContainer">
            <div id="tab1">One</div>
        </div>

        <div class="groupContainer">
            <div id="tab2">Two</div>
        </div>
    </div>
</body>
</html>

JavaScript

$( function()
{
    var $tabMe = $( '#tabMe' ),
        id="tab3",
        text = 'Three',
        addDiv = function()
        {
            $tabMe.
                children( 'div.groupContainer:last' ).
                    append( '<div id="' + id + '">' + text + '</div>' );
        },
        fin = function()
        {
           $( 'button' ).parent().empty().text( 'Reload or click js.Fiddle >Run to try other button' ); 
        };



    $tabMe.tabs();

    $( '#rebuild' ).click( function()
    {
        addDiv();

        $tabMe.
            children( 'ul:first' ).
                append( '<li><a href="#' + id + '">' + text + '</a></li>' ).
                end().
            tabs( 'destroy' ).
            tabs();

        fin();
    } );

    $( '#add' ).click( function()
    {
        addDiv();

        $tabMe.
            tabs( 'add', '#' + id, text );

        fin();
    } );
} );