Nested tab width

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
      <li><a href="#tabs-2">tab2</a>
      <div id="tabs-2"><div id="subtabs"><ul><li><a href="#subtabs-1">subtab1</a></li><li><a href="#subtabs-2">subtab2</a></li></ul><div id="subtabs-1">some data</div><div id="subtabs-2">some data</div></div></div>
      </li>
  </ul>
  <div id="tabs-1">
    some data
  </div>
  
</div>
<button id='add'>Click me</button>

JavaScript

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

var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width();

	//$('#add').click(function() { 
    //console.log('click');
    
    // Add tabs
    //$("#tabs ul").append('    <li><a href="#tabs-2">tab2</a></li>');
    //$("#tabs").append('<div id="tabs-2"><div id="subtabs"><ul><li><a href="#subtabs-1">subtab1</a></li><li><a href="#subtabs-2">subtab2</a></li></ul><div id="subtabs-1">some data</div><div id="subtabs-2">some data</div></div></div>');
    $( "#tabs" ).tabs( "refresh" );        
    var $slave = $("#subtabs").tabs();
    
    // Activate new tab 
    var oldActive = $( "#tabs" ).tabs( "option", "active" );
    $( "#tabs" ).tabs( "option", "active", 1 );
    
    // Get the width
    var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width();           
    $("body").append("Slave : "+slave_width);
    
    // Make the original tab active 
    $( "#tabs" ).tabs( "option", "active",oldActive );
    
    $(this).unbind('click');
    $(this).attr('disabled', 'disabled');
});