JQuery: Can I have 2 tabs on one page?

Question

I am trying to have 2 tabs on one page, but the first one works fine and the second one doesn't work at all.

Perhaps there are two tabs on the same page, if so, how can I do this?

Both have the same code ... example: $ ('# tab1'). tabs (); and other $ ('# tab2'). tabs ();

thank

My HTML:

<section>
<div id="radioprog">
    <h2 class="fire">R&aacute;dio</h2>
    <ul id="radio-nav">
        <li><a class="dia" href="#seg">2ª</a></li>
        <li><a class="dia" href="#ter">3ª</a></li>
    </ul>

    <div id="seg" class="programacao">
        seg
    </div>


    <div id="ter" class="programacao">
        ter
    </div>

</div>      
</section>

<section id="info-tab" style="width:325px; margin-top:3px;">
<div id="tabs">
    <ul>
        <li><a href="#comentados">+ Comentados</a></li>
        <li><a href="#lidos">+ Lidos</a></li>
    </ul>

    <div id="comentados">
        <ul>
            <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
            <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>

        </ul>
    </div>

    <div id="lidos">

        <ul>
            <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
            <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
        </ul>
    </div>
</div>      
</section>

Answer 1

You can have several tabs (nested, at the same level, etc.).

You are having trouble sharing the same identifiers.

Cm:

http://jsbin.com/eqivo/edit

Answer 2

, ... , , .

.