jQuery increment number on selector
<p>Question edited to add jsfiddle.net link by request. Sorry about that. Here's the link: <a href="http://jsfiddle.net/AuQL3/" rel="nofollow">http://jsfiddle.net/AuQL3/</a></p>

<p>I've got this function that looks like this:</p>

<pre><code>$(document).ready(function() {
    $('.innertabs2 &gt; div').hide();
    $('.innertabs2 div:first').show();
    $('.innertabs2 ul.inner-tab-nav2 li:first').addClass('active');
    $('.innertabs2 ul.inner-tab-nav2 li a').click(function() {
        $('.innertabs2 ul.inner-tab-nav2 li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('.innertabs2 &gt; div').hide();
        $(currentTab).fadeIn(400).show();
        //$(currentTab).show();
        return false;
    });
});​
</code></pre>

<p>Notice specifically the number 2 on the '.innertabs' and '.inner-tab-nav' selectors. What is the proper way to make this function more extendible so that it can be reused multiple times on a page instead of manually creating a new function each time?</p>

<p>Here's a simplified version of the HTML I'm working with:</p>

<pre><code>&lt;div class="tabs"&gt;&lt;!--begin tab container--&gt;

&lt;ul class="tab-nav"&gt;
    &lt;li&gt;&lt;a href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#menu3"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="MenuContent"&gt;&lt;!-- begin main tab's content--&gt;

        &lt;div class="innertabs2"&gt;&lt;!--begin subtab set 1 (need to autoincrement number)--&gt;

            &lt;ul class="inner-tab-nav2"&gt;
                &lt;li&gt;&lt;a href="#submenu1"&gt;Submenu 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#submenu2"&gt;Submenu 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#submenu3"&gt;Submenu 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;

            &lt;div id="submenu1"&gt;&lt;!--begin tab 1--&gt;                   

                {{CONTENT}}

            &lt;/div&gt;&lt;!--end tab 1--&gt;

            &lt;div id="submenu2"&gt;&lt;!--begin tab 2--&gt;

                {{CONTENT}}

            &lt;/div&gt;&lt;!--end tab 2--&gt;

            &lt;div id="submenu3"&gt;&lt;!--begin tab 3--&gt;

                {{CONTENT}}

            &lt;/div&gt;&lt;!--end tab 3--&gt;

        &lt;/div&gt;&lt;!--end subtab set 1--&gt;

&lt;/div&gt;&lt;!--end main tab's content--&gt;
</code></pre>

<p> </p>

<p>I've tried using .each() to get the desired effect but I think my syntax is way off:</p>

<pre><code>$(document).ready(function() {


 $(".tabs &gt; div").each(function(i) {
        $('.innertabs' + i &gt; div ').hide();
            $('.innertabs '+i div:first').show();
        $('.innertabs' + i 'ul.inner-tab-nav' + i li: first ').addClass('
        active ');
        $('.innertabs '+i '
        ul.inner - tab - nav '+i li a').click(function() {
            $('.innertabs' + i 'ul.inner-tab-nav' + i li ').removeClass('
            active ');
            $(this).parent().addClass('
            active ');
        var currentTab = $(this).attr('
            href ');
            $('.innertabs '+i &gt; div').hide();
            $(currentTab).fadeIn(400).show();
            //$(currentTab).show();
            return false;
        }
        });
    });​
</code></pre>
