JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.css">
<div id="box_form1">
    <div id="dialog" title="Tab data">
      <form>
        <fieldset class="ui-helper-reset">
          <label for="tab_title">Title</label>
          <input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">
          <label for="tab_content">Content</label>
          <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>
        </fieldset>
      </form>
    </div>
    
    <button id="add_tab">Add Tab</button>
    
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">TOTAL</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
      </ul>
      <div id="tabs-1">
        <table>
        <thead>
            <tr>
                <th>title</th>
                <th>2015</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>INV</td>
                <td>1000</td>
            </tr>
        </tbody>
    </table>
      </div>
    </div>
</div>
  
<input type="button" style="cursor:pointer" id="module_ppi" value="TEST">

JavaScript

$(document).ready(function () {
    $('#box_form1').dialog({
        title: "test",
        autoOpen: false,
        height: 600,
        width: 600,
        modal: true,
    });
    $('#module_ppi').button().click(function (e) {
        $('#box_form1').dialog('open');
    });

    var tabTitle = $("#tab_title"),
        tabContent = $("#tab_content"),
        tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
        tabCounter = 2;

    var tabs = $("#tabs").tabs();

    // modal dialog init: custom buttons and a "close" callback resetting the form inside
    var dialog = $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Add: function () {
                addTab();
                tabs.tabs( "option", "active", tabCounter - 2 );
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            form[0].reset();
        }
    });

    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find("form").submit(function (event) {
        addTab();
        dialog.dialog("close");
        event.preventDefault();
    });

    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
        var label = tabTitle.val() || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
            tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    }

    // addTab button: just opens the dialog
    $("#add_tab")
        .button()
       ...