DRYing out related multiple item templates

I'm looking to create some tabbed content on a page, the markup being a list for the tabs and then corresponding divs for the content. The user can add more tabs, so I'm looking to use either a repeater or multiple items to achieve this. I'm struggling to achieve this in a single template. I have what I need split between two templates which can each make use of their own perch_item_index and perch_item_first but this makes it clunky for the user as well as rather fragile. Does anyone have ideas as to how to make this solution more DRY?

Here's a simplified version of what I'm trying to output.

<nav>
<ul>
    <li><a href="#tab1" class="active">one</a></li>
    <li><a  href="#tab2">two</a></li>
    <li><a  href="#tab3">three</a></li>
</ul>
</nav>
<section>
    <div id="tab1" class="show">one</div>
    <div id="tab2">two</div>
    <div id="tab3">three>    
</section>

And I'm using the equivalent of these two related but unconnected templates:

<perch:before>
    <nav>
        <ul>
</perch:before>
            <li>
            <a href="#tab<perch:content id="perch_item_index" type="hidden"/>" class="<perch:if exists="perch_item_first">active</perch:if>">
        <perch:content type="text" id="tabTitle" label="Title" />
            </a>
        </li>
<perch:after>
        </ul>
    </div>
</perch:after>

and

<perch:before>
    <section>
</perch:before>
    <div class="<perch:if exists="perch_item_first">show </perch:if>" id="tab<perch:content id="perch_item_index" type="hidden"/>" >
        <perch:content type="text" id="content" label="Content"  />
    </div>
<perch:after>
    </section>
</perch:after>