добавить вкладку jquery в MVC4 и jquery ui 1.9

Я пытаюсь динамически добавить новую вкладку в частичное представление, это мой код:

Скрипт

     $(document).ready(function () {
        $("#tabs").tabs();
        jQuery("button").button().click(function () {
             var tabs = $( "#tabs" ).tabs();
             var ul = tabs.find( "ul" );
             $( "<li><a href='#tab4'>New Tab</a></li>" ).appendTo( ul );
             $("<div id='tab4'><p>New Content</p></div>").appendTo(tabs);
             tabs.tabs( "refresh" );
        });
     });

HTML

<div id=tabs>
<ul>
    <li><a href=#tab1>Tab 1</a></li>
    <li><a href=#tab2>Tab 2</a></li>
    <li><a href=#tab3>Tab 3</a></li>
</ul>
    <div id=tab1>Contents of the first tab</div>
    <div id=tab2>Contents of the second tab</div>
    <div id=tab3>Contents of the third tab</div>
</div>

<button>add</button>

проблема, когда я нажимаю кнопку, я получаю следующее:

это похоже на то, что новая вкладка не добавляется к вкладкам, а содержимое загружается в конце вкладок.

любая идея?