Displaying news entries as an archive by years and months

Question

I want to display the news entries as an archive by year and month in my site. This is the code which gets all the entries.

 foreach($data as $_year => $_months) {
    echo "<p id=\"showmonths\" >{$_year} </p>";    
    foreach($_months as $_month => $_entries) {
        echo "<ul>";
        echo "<li><p id=\"showitem\" class=\"months\" style=\"display: none\">{$_month} </p></li>";
        echo "<ul>";
        foreach($_entries as $_entry) {
            echo "<li><a class=\"item \" style=\"display: none\" href=\"single_post.php?post-slug={$_entry['slug']}\">{$_entry['title']}</a></li>";
        }
        echo "</ul>";
    }
    echo "</ul>";
}

I tried this JQuery code, but it doesn`t work correctly:

$(document).ready(function() {
    $('#showmonths').click(function() {
        $('.months').slideToggle("fast");
        if( $('.item').slideToggle("fast")) {
            $('.item').hide();
        }
    });
    $('#showitem').click(function() {
        $('.item').slideToggle("fast");
    });
});

It displays and works only for one item (due to the #id selector). How can I make it display every entry by years and months?