Tabs add function adds two panels

When adding a tab, I see two ui-tabs-panels inserted in the HTML, from which one stays empty and the other one gets loaded with the tab content:

<div id="contentTabs" class="ui-tabs ui-widget ui-widget-content">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
            <a onclick="javascript: reloadTab('#contentTabs', this)" href="#file_1_2">
                <span>Opbrengst NZ 2010</span>
            </a>
            <span class="ui-icon ui-icon-close" onclick="javascript: removeTab('#contentTabs', this);"></span>
        </li>
    </ul>
    <div id="file_1_2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        <div class="content">
            ....
        </div>
    </div>
    <div id="file_1_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
</div>

I'm using the following code

$('#contentTabs').tabs({
    'cache'  : true,
    'spinner': 'Bezig met laden',
    'add'    : function(event, ui) {
        if(ui.index > 0) {
            $(this).tabs('select', '#'+ui.panel.id);
        }
    },
    'ajaxOptions': {
        'async': false,
        'error': function(xhr, status, index, anchor) {
            $(anchor.hash).html('Er is iets mis gegaan. De pagina kon niet worden geladen');
        }
    }
});

$('#contentTabs').tabs('option', 'tabTemplate', 
    '<li>'+
    '    <a href="#{href}" onclick="javascript: reloadTab(\\'#contentTabs\\', this)">'+
    '        <span>#{label}</span>'+
    '    </a>'+
    '    <span onclick="javascript: removeTab(\\'#contentTabs\\', this);" class="ui-icon ui-icon-close"></span>'+
    '</li>'
);


var tabId = 'file_'+fileId+'_';
$('#contentTabs').tabs('option', 'idPrefix', tabId);
createTab('#contentTabs', 'index.pl?a=file_open;fileId='+fileId, name, tabId);

function createTab(parentId, tabUrl, tabLabel, tabId) {
    if($(parentId).length > 0 ) {
        var $tab = $(parentId).tabs();
        var selected = $tab.tabs('option', 'selected');
        if($('div[id^='+tabId+']', $(parentId)).is('div')) {
            var index = $(parentId + ' div').index($('div[id^='+tabId+']'));
            if(!(index == selected)) {
                $(parentId).tabs('url', index, tabUrl);
                $(parentId).tabs('select', index);
                $(parentId).tabs('load', index);
            }
        } else {
            $(parentId).tabs('add', tabUrl, tabLabel);
        }
    }
}