Adding Dynamic Tab in BootStrap Tabs

Question

I am using Twiter Bootstrap Tabs on my page. I want to dynamically add tabs in the view. Currently I am using this code, which is not working

$('#tab').append('<li><a href="#tabname" data-toggle="tab">Tab Name</a></li>');
$('#myTabContent').append('<div class="tab-pane fade in active" id="tabname"><p>tab content</p></div>');
$('#tab a:last').tab('show');

Can Any body tell me what I am missing?

Answer 1

Now I am using this code that's working

$('div.active').removeClass('active').removeClass('in');
$('li.active').removeClass('active');

$('#myTabContent').append('<div class="tab-pane in active" id="new_tab_id"><p> Loading content ...</p></div>');
$('#tab').append('<li><a href="#new_tab_id" data-toggle="tab">Tab Name</a></li>');
$('#tab a:last').tab('show');