Заранее спасибо за любой вклад / помощь / совет ...

Я использую вкладки Twitter Bootstrap, чтобы упорядочить некоторую информацию. Вкладки будут расположены на странице формы, и каждая вкладка будет состоять из «контактной формы», в которой пользователь может добавить несколько контактов на эту страницу до отправки всей формы.

<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>

Полный код здесь:http://jsfiddle.net/Harlow/zQnck/34/

Я пытаюсь имитировать функциональность примера «простых манипуляций» в пользовательском интерфейсе jQuery. (http://jqueryui.com/tabs/#manipulation)

То, что у меня сейчас есть, добавит новую вкладку, но я хочу иметь возможность добавить новую, уникальную вкладку со своим собственным идентификатором (продолжение кода, например, «contact_01, contact_02 и т. Д.»), Нажав «+ Добавить» Новый контакт ", который всегда будет последней вкладкой, но на самом деле не имеет собственной панели содержимого вкладки. С другой стороны динамического добавления контента, я хочу иметь возможность удалять его, нажимая маленькую букву «х» на каждой вкладке.

--РЕДАКТИРОВАТЬ--

Просто чтобы уточнить, пример запуска jQuery становится модальным после нажатия «Новая вкладка». Для моих целей я просто хочу создать новую вкладку без ввода имени вкладки или содержимого (содержимое всегда будет одной и той же контактной формы, и я согласен с тем, что имя вкладки совпадает с вновь созданным идентификатором - я буду сделать так, чтобы оно автоматически обновлялось до имени контакта позже.)