Show and hide for every click with jquery

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

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");
        });
    });

Answer 2

You need the handler to attach the the event. try add the ready

$( document ).ready(function() {
        $('#mod').click(function() {
            $('#modification').toggle("slide");
        });
    });