tabs dynamically jquery

Good is the following I am using the datatables and when I click a value opens a modal. I just wanted to put this open in a new tab and I do not know how to do it.

I would for example main tab clients where I have a form to search and show the datatables and after clicking open more details would open a new tab.

example link

Modal

<div class="modal fade bs-detalhes-modal-lg" id="details" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body" id="conteudoModal">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default btn-mini" data-dismiss="modal">Fechar</button>
        </div>
    </div>
</div>

The following script will add a new tab only that does not redirect me to it load (id) is an onclick that receives a value per parameter

    function load(id) {
    $.ajax({
        method: "GET",
        url: "./modals/info.php",
        data: {id: id},
        success: function (data) {
            $('.nav-tabs').append('<li class="nav"> <a href="#detalhes" data-toggle="tab" id="' + id + '" onclick="update(this.id)">'+'Cod' + id + '  <button class="close closeTab" type="button" >×</button></a></li>');
            $('.tab-content').append('<div class="tab-pane active" id="' + id + '"></div>');
            $("#conteudoModal").html(data);
            document.getElementById("show").style.display = "";

        }

    });

    $('#detalhes').tab('active');

    }