Как добавить несколько таблиц с вкладками jQuery на одну страницу?

Question

Как видно из заголовка, я пытаюсь добавить две отдельные таблицы с вкладками на одну страницу, используя следующий скрипт jQuery (который я нашел здесь ):

<div class="firstTable">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">Some Text 1<br /> </div>
    <div id="tab-2" class="tab-content">Some Text 2<br />very important</div>
    <div id="tab-3" class="tab-content">Some Text 3<br />garbage</div>
    <div id="tab-4" class="tab-content">Some Text 4<br />something else</div>
</div>

<script>
$(document).ready(function () {
    $('ul.tabs li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    });
</script>

Этоотлично работает для одной таблицы, безошибочно переключаясь на любую выбранную вкладку.

Однако, когда я пытаюсь добавить вторую таблицу с вкладками на ту же страницу, как показано ниже, все идет не так гладко:

<div class="firstTable">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">Some Text 1<br /> </div>
    <div id="tab-2" class="tab-content">Some Text 2<br />very important</div>
    <div id="tab-3" class="tab-content">Some Text 3<br />garbage</div>
    <div id="tab-4" class="tab-content">Some Text 4<br />something else</div>
</div>

<div class="secondTable">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">Some Text 1<br /> </div>
    <div id="tab-2" class="tab-content">Some Text 2<br />very important</div>
    <div id="tab-3" class="tab-content">Some Text 3<br />garbage</div>
    <div id="tab-4" class="tab-content">Some Text 4<br />something else</div>
</div>

<script>
$(document).ready(function () {
    $('ul.tabs li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    });
</script>

Все загружается правильно, первая вкладка каждой таблицы выбрана правильно, а правильные данные показаны ниже в таблице.Но когда я нажимаю на любую из вкладок любой таблицы, другая таблица исчезает из-за следующей строки:

$('.tab-content').removeClass('current');

С этого момента я могу отображать только одну таблицу за раз, пока я не обновлю страницу.

К сожалению, у меня проблемы с поиском работы вокруг ... у кого-нибудь есть идеи?

Редактировать: Проблема была решена freedomn-m кто предложил добавить дополнительный селектор классов:

$(".secondTable .tab-content").removeClass("current");

Спасибо!