JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<div id="tabs">
  <ul>
    <li><a href="#tabs1">Tab 1</a></li>
    <li><a href="#addNew">+</a></li>
  </ul>
  <div id="tabs1">
    <p>test 1</p>
  </div>
  <div id="addNew">
    
  </div>
</div>

JavaScript

var tabCounter = 1;
  $("#tabs").tabs({
    beforeActivate : function(event, ui){
      if(ui.newPanel.selector == "#addNew"){
        addNewTab();
        event.preventDefault();
        return false;
      }
    }
  });
  function addNewTab(){
    tabCounter++;
    var link = "#tabs"+tabCounter;
    $("<li />").append($("<a />",{href:link}).text("Tab "+tabCounter)).insertBefore($("#tabs ul li:last"));
    $("<div />",{id:"tabs"+tabCounter}).append($("<p />").text("test "+tabCounter)).insertBefore($("#addNew"));
    $("#tabs").tabs("refresh");
  }