Drupal Vertical Tabs - add another item dynamically

Question

I have a form which is divided into vertical tabs. I want to dynamically add another tab using Ajax. I've managed to add fields via AJAX and add another

item as a vertical tab item, but when I am trying to click it,it does not work. I'm getting TypeError: tab is undefined.

Here is the code:

    $form['names_fieldset']['add_name'] = array(
    '#type' => 'submit', 
    '#value' => t('Add another section'), 
    '#submit' => array('mymodule_add_more_add_one'), 
    '#ajax' => array(
        'callback' => 'mymodule_add_more_callback', 
        'wrapper' => 'names-fieldset-wrapper', 
        ),
    '#limit_validation_errors' => array(), 
);

function mymodule_add_more_callback($form, $form_state) {
$commands = array();

$current_id = $form_state['num_names'] - 1;

$subject = drupal_render($form['names_fieldset'][$current_id]['subject']);
$html = '<li id="group_custom_' . $current_id . '" class="vertical-tab-button vertical-tab-button-custom">' . $subject . '</li>';   
$commands[] = ajax_command_append(".vertical-tabs-list", $html);
$commands[] = ajax_command_invoke('.vertical-tabs .vertical-tabs-panes fieldset', 'hide');

$id = 'node_cv_form_group_custom_' . $current_id;
$class= 'field-group-tab group-group-custom-' . $current_id . ' required-fields form-wrapper vertical-tabs-pane fieldgroup-effects-processed';
$body = drupal_render($form['names_fieldset'][$current_id]['body']);
$html = '<fieldset id="' . $id . '" class="' . $class . '"><div class="fieldset-wrapper">' . $body . '</div></fieldset>';

$commands[] = ajax_command_append(".vertical-tabs .vertical-tabs-panes", $html);

return array(
    '#type' => 'ajax',
    '#commands' => $commands,
);

}

function mymodule_add_more_add_one($form, &$form_state) {
$form_state['num_names']++;
$form_state['rebuild'] = TRUE;}

EDIT

The Vertical Tabs are generated by field-group module.