title: Create Dynamic tab in jquery-ui tab
body: <p>I was doing a project on HTML and jQuery recently. Thing I want to achieve now is to create  dynamic tab with particular data on a button click.</p>
  
  <p>My code for JQuery-UI tab is</p>
  
  <pre><code>$(document).ready(function() {
          var $tabs = $("#container-1").tabs();
              var tabTemplate = "&lt;li&gt;&lt;a href='#{href}'&gt;#{label}&lt;/a&gt; &lt;span class='ui-icon ui-icon-close' role='presentation'&gt;Remove Tab&lt;/span&gt;&lt;/li&gt;",
              tabCounter = 2;
  
          $('#add_tab').click( function(){   
               var label = 'New',
              id = "tabs-" + tabCounter,
              li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
              tabContentHtml = 'hi';
              tabs.find( ".ui-tabs-nav" ).append( li );
              tabs.append( "&lt;div id='" + id + "'&gt;&lt;p&gt;" + tabContentHtml + "&lt;/p&gt;&lt;/div&gt;" );
              tabs.tabs( "refresh" );
              tabCounter++;
          });
          $('#new').click( function(){
              $tabs.tabs('select', 2);
          });
  
      }); 
  </code></pre>
  
  <p>My HTML file</p>
  
  <pre><code>&lt;div id="container-1"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#fragment-1"&gt;List&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="fragment-1"&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;button id="add_tab"&gt;Add Tab&lt;/button&gt;
  </code></pre>
  
  <p>When i click 'add' button in the console of firebug I'm get error:</p>
  
  <pre><code>ReferenceError: tabs is not defined
  http://localhost:3000/
  Line 38
  </code></pre>
  
  <p>I'm not so good with jquery-ui. How do I fix this problem?</p>