Z góry dziękuję za wszelkie informacje / pomoc / poradę ...

Używam kart Twitter Bootstrap do organizowania niektórych informacji. Zakładki zostaną umieszczone na stronie formularza, a każda karta będzie składać się z „formularza kontaktowego”, w którym użytkownik może dodać wiele kontaktów do tej strony przed przesłaniem całego formularza.

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

Pełny kod tutaj:http://jsfiddle.net/Harlow/zQnck/34/

Próbuję naśladować funkcjonalność kart typu „prosta manipulacja” jQuery UI. (http://jqueryui.com/tabs/#manipulation)

To, co aktualnie posiadam, doda nową kartę, ale chcę mieć możliwość dodania nowej, unikalnej karty z własnym identyfikatorem (kontynuacja z kodu, np. „Contact_01, contact_02 itd.”), Klikając „+ Dodaj Nowy kontakt ”, który zawsze będzie ostatnią kartą, ale w rzeczywistości nie ma własnego panelu zawartości karty. Po drugiej stronie dynamicznie dodawanej treści chcę móc ją usunąć, klikając małe „x” na każdej karcie.

--EDYTOWAĆ--

Aby wyjaśnić, przykład jQuery jest modalny po kliknięciu „Nowa karta”. Dla moich celów chcę po prostu utworzyć nową kartę bez wprowadzania nazwy karty lub treści (treść zawsze będzie taka sama jak formularz kontaktowy, a dobrze, że nazwa karty jest taka sama jak nowo wygenerowany identyfikator - będę automatycznie zaktualizować nazwę kontaktu do późniejszego.)