Gracias de antemano por todas y cada una de las aportaciones / ayuda / consejos ...

Estoy usando las pestañas de Twitter Bootstrap para organizar alguna información. Las pestañas se ubicarán en una página de formulario, y cada pestaña consistirá en un "formulario de contacto", en el cual el usuario puede agregar múltiples contactos a esta página antes de enviar el formulario completo.

<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 aquí:http://jsfiddle.net/Harlow/zQnck/34/

Estoy tratando de imitar la funcionalidad del ejemplo de "manipulación simple" de jQuery UI de pestañas. (http://jqueryui.com/tabs/#manipulation)

Lo que tengo actualmente agregará una nueva pestaña, pero quiero poder agregar una nueva y única pestaña con su propia ID (continuando desde el código, como "contact_01, contact_02, etc.") haciendo clic en "+ Agregar Nuevo contacto ", que siempre será la última pestaña, pero en realidad no tendrá su propio panel de contenido de pestaña. Al otro lado de agregar contenido dinámicamente, quiero poder eliminarlo haciendo clic en la pequeña "x" en cada pestaña.

--EDITAR--

Solo para aclarar, el ejemplo de jQuery es un modal al hacer clic en "Nueva pestaña". Para mis propósitos, solo quiero crear una nueva pestaña sin ingresar el nombre o el contenido de la pestaña (el contenido siempre será el mismo formulario de contacto, y estoy de acuerdo con que el nombre de la pestaña sea el mismo que el ID generado recientemente. haga que se actualice automáticamente al nombre del contacto más adelante.)