Agradecemos antecipadamente por toda e qualquer entrada / ajuda / conselho ...

Estou usando as guias do Twitter Bootstrap para organizar algumas informações. As guias estarão localizadas em uma página de formulário e cada guia consistirá em um "formulário de contato", no qual o usuário poderá adicionar vários contatos a essa página antes de enviar o formulário inteiro.

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li>
        <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li>
        <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
        <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
    </div>
</div>

Código completo aqui:http://jsfiddle.net/Harlow/zQnck/34/

Eu estou tentando imitar a funcionalidade do exemplo de "simples manipulação" do jQuery UI de guias. (http://jqueryui.com/tabs/#manipulation)

O que eu tenho atualmente irá adicionar uma nova aba, mas eu quero ser capaz de adicionar uma nova aba única com seu próprio ID (continuando a partir do código, como "contact_01, contact_02, etc.") clicando no botão "+ Adicionar Novo contato ", que sempre será a última guia, mas na verdade não tem seu próprio painel de conteúdo da guia. Do outro lado da adição dinâmica de conteúdo, quero poder excluí-lo clicando no pequeno "x" em cada guia.

--EDITAR--

Só para esclarecer, o acionador de exemplo do jQuery é um modal ao clicar em "Nova aba". Para os meus propósitos, eu só quero criar uma nova aba sem inserir o nome da aba ou o conteúdo (o conteúdo será sempre o mesmo formulário de contato, e eu estou bem com o nome da aba sendo o mesmo da ID recém-gerada - eu atualizá-lo automaticamente para o nome do contato posteriormente.)