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...

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?