Show and hide for every click with jquery - php

Question

i have to show and hide a div after click on a text in a span. I have many generated from a loop and i would like click sur every #mod and show me the hidden div. But the hidden div is showed just if i click on the first #mod. How can i make all the #mod a I make this code, but it work just for only one and not for all. Where i m wrong?
<tbody>
<form action="#" method="post" enctype="multipart/form-data" name="actionpost">
<?php
global $wpdb;
$articles = $wpdb->get_results( "select * from {$wpdb->prefix}mic_articles");
?><?php
foreach ($articles as $article){
$url = get_home_url() . "/" . strtolower( str_replace( " ", "-", normalize( $article->titre ) ) );
echo "
<tr class='alternate' valign='top'>
<th class='check-column' scope='row'> <input type='checkbox' name='article[]' value='$article->id'></th>
<td class='column-columnname'><a href='$url'><strong>$article->titre</strong></a>
<div class='row-actions'>
<span id='mod'><a href='#'>Modifier</a> </span> | <span style='color:red' class='supp'>Corbeille</span>
</label>
</div>
</td>
<td class='column-columnname'></td>
</tr>";
}
?>
<?php
?>
</tbody>
</table>
<script>
$('#mod').click(function() {
$('#modification').toggle("slide");
});
</script>

Answer 1

You need the handler to attach the the event. try add the ready
$( document ).ready(function() {
$('#mod').click(function() {
$('#modification').toggle("slide");
});
});

Answer 2

Id in span tag, it has to be unique. You can use a class instead.
<span class="mod">...</span>
$( document ).ready(function() {
$('.mod').click(function() {
$('#modification').toggle("slide");
});
});