title: dynamically adding a tab, on button click
body: <p>Html code :</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;li&gt;&lt;a href="#fragment-2"&gt;List&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#fragment-3"&gt;List&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="fragment-1"&gt;one&lt;/div&gt;
      &lt;div id="fragment-2"&gt;two&lt;/div&gt;
      &lt;div id="fragment-3"&gt;three&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="add_tab"&gt;Add Tab&lt;/button&gt;
  </code></pre>
  
  <p>and I want to add one more tab "fragment-4" which is on button onclick event.
  this tab div is out of <code>&lt;div id="container-1"&gt;</code>. and I am use following java script :</p>
  
  <pre><code>$(document).ready(function() {
          var tabs = $("#container-1").tabs();
              var tabCounter = 1;
  
          $('#add_tab').click( function(){
              var ul = tabs.find( "ul" );
              $( "&lt;li&gt;&lt;a href='#fragment-4'&gt;Call Detials&lt;/a&gt;&lt;/li&gt;" ).appendTo( ul );
              tabs.tabs( "refresh" );
              tabs.tabs('select', 1);
          });
    }); 
  </code></pre>
  
  <p>Using this function I can get dynamically tab but not content which is write in this tab.
  so please suggest me what can I do?</p>