jquery question about "this"

I have this javascript code:

<script type="text/javascript">
        $(document).ready(function(){
            //Set the selector in the first tab
            $("#blokken .links .tabmenu span:first",this).addClass("selector");


            //Basic hover action
            $(".links .tabmenu span").mouseover(function(){
                $(this).addClass("hovering");
            });
            $(".links .tabmenu span").mouseout(function(){
                $(this).removeClass("hovering");
            });             

            //Add click action to tab menu
            $(".links .tabmenu span",this).click(function(){
                //Remove the exist selector
                $(".selector").removeClass("selector");
                //Add the selector class to the sender
                $(this).addClass("selector");

                //Find the width of a tab
                var TabWidth = $(".TabContent:first").width();
                if(parseInt($(".TabContent:first").css("margin-left")) > 0)
                    TabWidth += parseInt($(".TabContent:first").css("margin-left"));
                if(parseInt($(".TabContent:first").css("margin-right")) >0)
                    TabWidth += parseInt($(".TabContent:first").css("margin-right"));
                //But wait, how far we slide to? Let find out
                var newLeft = -1* $("span").index(this) * TabWidth;
                //Ok, now slide
                $(".AllTabs").animate({
                    left: + newLeft + "px"
                },1000);
            });
        });
    </script>

And i have the html

<div class="links">
                    <div class="tabmenu">           
                        <span class="managementmodellen">Managementmodellen</span>
                        <span class="cursus">Cursus</span>
                        <span class="apps">Apps</span>
                    </div>

                    <div class="ContentFrame">
                        <div class="AllTabs">
                            <div class="TabContent">
                                <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" />
                                <p><strong>Timemanagement</strong>
                                    Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
                                    ter hand te nemen, vooral als het omvangrijke klussen zijn.
                                </p>
                            </div>
                            <div class="TabContent">
                                <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" />
                                <p><strong>Timemanagement</strong>
                                    Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
                                    ter hand te nemen, vooral als het omvangrijke klussen zijn.
                                </p>
                            </div>
                            <div class="TabContent">
                                <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height开发者_高级运维="105" />
                                <p><strong>Timemanagement</strong>
                                    Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
                                    ter hand te nemen, vooral als het omvangrijke klussen zijn.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

I have now a jquery tab construction. But no i want two or more tabs on the website. When i placed on the website, two tabs. So i want to places two But when i placed two tabs (div class=links) on the website. Than the tabs is not good working. When i clicked on the two tab construction. The first tab going also.

How can i fix this? That is can make more than 1 on 1 page.

This is not a direct answer, but you should consider using existing solutions like http://jqueryui.com/demos/tabs/

Or use any plugin, eg: http://plugins.jquery.com/project/SmartTab

ps. I know reinventing the weel is fun - I do it myself a lot :)

<script type="text/javascript">
        $(document).ready(function(){
            //Set the selector in the first tab
            $("#blokken .links .tabmenu span:first",this).addClass("selector");


            //Basic hover action
            $(".links .tabmenu span").mouseover(function(){
                $(this).addClass("hovering");
            });
            $(".links .tabmenu span").mouseout(function(){
                $(this).removeClass("hovering");
            });             

            //Add click action to tab menu
            $(".links .tabmenu span",this).click(function(){
                // save THIS tab construction selector
                var thisTabs=$(this).closest(".link");
                //Remove the exist selector
                thisTabs.find(".selector").removeClass("selector");
                //Add the selector class to the sender
                $(this).addClass("selector");

                //Find the width of a tab
                var TabWidth = thisTabs.find(".TabContent:first").width();
                if(parseInt(thisTabs.find(".TabContent:first").css("margin-left")) > 0)
                    TabWidth += parseInt(thisTabs.find(".TabContent:first").css("margin-left"));
                if(parseInt(thisTabs.find(".TabContent:first").css("margin-right")) >0)
                    TabWidth += parseInt(thisTabs.find(".TabContent:first").css("margin-right"));
                //But wait, how far we slide to? Let find out
                // i really dont understand this line
                var newLeft = -1* thisTabs.find("span").index(this) * TabWidth;
                //Ok, now slide
                thisTabs.find(".AllTabs").animate({
                    left: + newLeft + "px"
                },1000);
            });
        });
    </script>

Equal my advice is dont reinvent the weel sry for me english