CodingForums.com - jQuery Tabs Question

I have a simple jQuery tabs application that works fine but I wanted to basically duplicate the navigation at the bottom each tab/page so I could have a "Next" and "Back" button. I figured since their ID's would be pointing to the same place, they'd create active instances for both buttons. So if it's on tab one, it'll show a "Next" button pointing to #two. When I click on "Next", it does go to tab 2 but it doesn't update the active state for the top button. I don't understand how jQuery differentiates which one is clicked because their target ID's are the same, and UL class is the same...:confused:

But here is the basic HTML code:

Code:

<div id="top_navigation">

      <ul class="idTabs">

        <li class="info_one"><a href="#one" >Appraiser Information</a></li>

        <li class="info_two"><a href="#two">Contract</a></li>

       </ul>

</div>

<div id="one">

Tab one content goes here

<div id="bottom_navigation">

      <ul class="idTabs">

      <li class="contract"><a href="#two">Next</a></li>

      </ul>

</div>

</div>



<div id="two">

Tab two content goes here

<div id="bottom_navigation">

      <ul class="idTabs">

      <li class="contract"><a href="#one">Back</a></li>

      </ul>

</div>

</div>

And here is where I think the active states are updated in the jQuery code:

Code:

if(s.click && !s.click.apply(this,[id,idList,tabs,s])) return s.change; 



      //Clear tabs, and hide all 

      for(i in aList) $(aList[i]).removeClass(s.selected); 

      for(i in idList) $(idList[i]).hide(); 



      //Select clicked tab and show content 

      $(this).addClass(s.selected); 

      $(id).show(); 

      return s.change; //Option for changing url 

      } 

 

    //Bind idTabs 

    var list = $("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId); 

    list.each(function(){ $("#"+this.href.split('#')[1]).hide(); });

Is there a way to modify this so the active states update on both buttons?