Добавить / удалить 5 вкладок динамически при активизации созданной вкладки в Bootstrap

Question

Я хочу добавить только 5 динамических вкладок, используя Bootstrap, где добавленная вкладка становится активной.Проблема в том, что мне нужно «Добавить контакт» в Tab-контенте (URL для «Добавить контакт» будет #cid для MYSQL Query).Также 1-я и 2-я вкладка должны быть статичными.2-я вкладка представляет собой представление DataTable, где каждая строка имеет ссылку / URL (Добавить контакт) для просмотра содержимого в новой вкладке.

Подобный тип примера доступен в http://jsfiddle.net/happysmiles/F33Av/22, но я не смоготредактировать и использовать его для моей вышеуказанной цели.

<div class="container">
    <ul class="nav nav-tabs" role="tablist">
        <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">+ 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>

JQuery

$(".nav-tabs").on("click", "a", function (e) {
        e.preventDefault();
        if (!$(this).hasClass('add-contact')) {
            $(this).tab('show');
        }
    })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

$('.add-contact').click(function (e) {
    e.preventDefault();
    var id = $(".nav-tabs").children().length; //think about it ;)
    var tabId = 'contact_' + id;
    $(this).closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('.tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
   $('.nav-tabs li:nth-child(' + id + ') a').click();
});

CSS

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
.nav-tabs > li {
    position:relative;
}
.nav-tabs > li > a {
    display:inline-block;
}
.nav-tabs > li > span {
    display:none;
    cursor:pointer;
    position:absolute;
    right: 6px;
    top: 8px;
    color: red;
}
.nav-tabs > li:hover > span {
    display: inline-block;
}