Problems with jquery <ul>

Problems with jquery <ul>

Hi people :D

I have a doubt.

I have a button, where I have an ID

CODE
<li class='inline btn_fone'>
    <a href='java script: void(0)' id='$id' class='botao_f efeito_fade'>
    </a>
</li>




When I click on this button, it should get this ID and open an <ul>, that is a telephone list, which is called from a database

CODE
<div id='exibe_fones'>
    <ul id= '$id_lista' class='lista_fones'>
        <li class='fone_n'>9999-9999</li>
    <li class='fone_n'>9999-9999</li>
    </ul>
</div>






My jQuery is like this:
CODE
/* EXIBE FONES */
$(".lista_fones").hide();

$(".botao_f ").click(function () {
    var id = $(this).attr('id');
    if ($("#"+id+"_lista").is(":hidden")) {
        event.preventDefault();
        $("#"+id+"_lista").slideDown("normal");
    } else {
        event.preventDefault();
        $("#"+id+"_lista").slideUp("normal");
    }
});













When I send the parameter inside, like <id="10">, and on <ul id="10_lista">, it works, opening in the first <ul>.











But the problem is that I have a list with 10 telephones, sequentially.

How could I set $id and call $id_lista to open in the correct local my <ul> ???
Thanks :D