Multiple Container DIVs Changing Content Independently via Links

On my website I have various containers with content <div>s text in them. I then have links in the container which change the content <div>s.

However, I cannot get the links to target a specific content , instead the both sets of links change both container <div>s.

http://jsfiddle.net/hKMFb/1/

If you look at the jfiddle, I want both the first-div and the second-div to have content in them automatically, and then I would like the links to only change their respective content. Instead I only have content1-4 showing up in both. I'll put the code here as well:

//HTML
<div class="container-div">
    <div id="tab">
    <ul>
        <li id="tab1" class="active"><a href="#">Link 1</a></li>
        <li id="tab2"><a href="#">Link 2</a></li>
        <li id="tab3"><a href="#">Link 3</a></li>
        <li id="tab4"><a href="#">Link 4</a></li>
    </ul>
    </div>

    <div id="content1" class="content">Content Here1</div>
    <div id="content2" class="content">Content Here2</div>
    <div id="content3" class="content">Content Here3</div>
    <div id="content4" class="content">Content Here4</div>
</div>


<div class="container-div">
    <div id="tab">
    <ul>
        <li id="tab5" class="active"><a href="#">Link 5</a></li>
        <li id="tab6"><a href="#">Link 6</a><开发者_StackOverflow;/li>
        <li id="tab7"><a href="#">Link 7</a></li>
        <li id="tab8"><a href="#">Link 8</a></li>
    </ul>
    </div>
    <div id="content5" class="content">Content Here1</div>
    <div id="content6" class="content">Content Here2</div>
    <div id="content7" class="content">Content Here3</div>
    <div id="content8" class="content">Content Here4</div>
</div>

And the script:

//Jquery Business

$(document).ready(function() {
    var activeId = $(".active").attr("id").replace("tab",""); $("#content" + activeId).show();
   $("#tab a").click(function() {
      $(".content").hide();
      $("#tab .active").removeClass("active");
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
      $("#content" + id).show();
   });

});

Is that you are looking for?

http://jsfiddle.net/hKMFb/24/

There are a few problems. First, you have two div tags with id="tab". Your other problem is that you have class="active" on two li tags at the same time. I'm working with your code now to see if I can find a solution.

Update: Here's a link to a forked fiddle where it works fine: http://jsfiddle.net/Skooljester/LNXPG/ FYI, you have content 1-4 showing up on both because of your HTML...

<div id="content1" class="content">Content Here1
<div id="content2" class="content">Content Here2
<div id="content3" class="content">Content Here3
<div id="content4" class="content">Content Here4

That code is repeated twice, once for the first set of tabs and again for the second. If you change 1,2,3,4 to 5,6,7,8 for the second set it displays properly.