Jquery for duplicate tabs

I am trying to create tabs in jquery and have been successful. However, there is one issue I am unable to solve and that is duplicate tabs.

With a single tab, jquery works fine but when I copy and paste that tab it does not work properly. I did add some extra code to find the tab in which the use is currently in by using the closest function but still no result.

Have a look at the code.

//HTML

<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
       <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>
    </section>
</div>


//2nd tab
<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
        <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>

    </section>
</div>

CSS Code

.tabsContainer{
    overflow:hidden;
}
.tabs-nav{
    overflow:hidden;
    margin:0;
    padding:0;
    list-style:none;
}
.tabs-nav li {
    display: inline-block;
    background: #34495E;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #34495E;
    margin-right: 5px;
}
.tabs-nav li a {
    display: block;
    padding: 10px 15px;
    font-weight: bold;
    color: #fff;
}
.tabs-nav li a.active {
    background: #FFF;
}

.tabs-nav li a.active {
    color: inherit;
}
.tabs-content {
    border: 1px solid #34495E;
    padding: 10px;
    background: #FFF;
    margin-top: -1px;
    overflow:hidden;
}
.tabs-content .tabs{
    overflow:hidden;
    display:none;
    margin:0 0 30px;
}
.tabs-content .tabs.active{
    display:block;
}

JAVAScript

$(function() {

    //listeing for click events
    $('.tabsContainer .tabs-nav li a').on('click', function(){

        //if more than 1 tab find out which tab you are currently in using the closest function
        //by clicking on the a tag it will find which container it is a part of.
        var $tab = $(this).closest('.tabsContainer'); 

        $tab.find('.tabs-nav li a.active').removeClass('active');
        $(this).addClass('active');
        //grabbing the tab which is clicked using the attribute "href"
        var currentClick = $(this).attr('href');

        //hiding the current panel
        //using a call back function. What this does is wait for the slideup to finish and then it will excute the call back function
        $tab.find('.tabs-content .tabs.active').slideUp(300, nextTab);

        //the call back function to show the new tab
        function nextTab(){
            $(this).removeClass('active');
            $(currentClick).slideDown(300, function(){
                $(this).addClass('active');
            });
        }
    });
});