How to add or remove jQueryUI tabs using knockout JS?

http://stackoverflow.com/questions/7381419/how-to-add-or-remove-jqueryui-tabs-using-knockout-js

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div data-bind="template: 'tmplTabs'" id="featured"></div>

<script type="text/x-jquery-tmpl" id="tmplTabs">
    <ul>
        {{each effects}}
        <li><a href="#e${$index} ">Effect ${$index + 1}</a></li>
        {{/each}}
    </ul>
    {{each effects}}
    <div id="e${$index}">
        <span class="charLeft"></span>
        <textarea data-bind="text: Text"></textarea>
    </div>
    {{/each}}
</script> 

<a id="add">Add Tab</a>

CSS

#add 
{
    display:block;border:solid 1px #000;float:left;margin:5px;padding:5px;
    background:#aaa;
}

JavaScript

function Effect(text, effID, essID) {
    this.Text = text;
    this.EssenceEffectID = (typeof effID == "undefined") ? 0 : effID;
    this.EssenceID = (typeof eID == "undefined") ? 0 : eID;
}

//Initial data from the server
var dEffects = [{
    "EssenceEffectID": 1,
    "Text": "Hello World!",
    "EssenceID": 1}, {
    "EssenceEffectID": 3,
    "Text": "Hello World 3!",
    "EssenceID": 3} ];

function VM() //ViewModel
{
    this.effects =  ko.mapping.fromJS(dEffects); 
}

var vm = new VM();
ko.applyBindings(vm);

$(document).ready(function()
{
    $( "#featured" ).tabs();
    $("#add").click(function()
    {
        vm.effects.push(new Effect("NewTab", 2, 2));
    });
});