Nested tabs problem

I'm trying nest one set of tabs (tabrow2) inside another (tabrow1) like so ...

<div id="tabrow1" >
<ul>
    <li><a href="#homePage" class="homeTab">My Quotes</a></li>
    <li><a href="#tabrow1-2">All Quotes</a></li>
    <li><a href="#addaQuotePage">Add a quote</a></li>
</ul>
   <div id="tabrow1-2">
    <div id="tabrow2">
      <ul>
        <li><a href="#authorsPage">By Author</a></li>
        <li><a href="#byTagPage">By Tag</a></li>
        <li><a href="#findQuotePage" class="searchTab">Search</a></li>
        <li><a href="#recentlyAddedQuotes">Recently added</a></li>
      </ul>
    </div>
</div>
<div id="homePage"></div>
<div id="addaQuotePage"></div>
...

The problem that I'm having is that the tab that is currently selected in tabrow2 also displays into the tab that is selected in tabrow1.

I've tried to dynamically unselect the tabs but that doesn't seem to change anything.
        $('#tabrow2 li').removeClass('ui-tabs-selected ui-state-active');

Does anyone know a solution to this problem and/or if the JQuery UI tabs are not designed/tested to be nested in this fashion?

Thanks in advance.

~Alex