Toggle script inside a loop only works for first iteration
<p>Here is my php/javascript code. I have tried to write the script inside the loop but it doesn't work. This generates two buttons, one for local team, while processing local team, and the second for road team, while processing road team. These buttons show information contained in a div of a different class. For some reason, it works only for the local team, which its the first iteration of the loop.</p>

<p>I have read a lot about people using id's instead of classes, but this is not my case. I am quite lost. </p>

<p>Thank you very much for your help.</p>

<pre><code>&lt;script&gt;
    $(".showavgloc").click(function(){
        event.preventDefault();
        $(".averageloc").slideToggle("slow");
    });
    $(".showavgvis").click(function(){
        event.preventDefault();
        $(".averagevis").slideToggle("slow");
    });
&lt;/script&gt;
&lt;?php
foreach ($teams as $team) { 
    if ($page=="game") { 
        if ($team==$locteam) { 
            echo "&lt;button class='showavgloc'&gt;Show average player&lt;/button&gt;";
        }
        if ($team==$visteam) {
            echo "&lt;button class='showavgvis'&gt;Show average player&lt;/button&gt;";
        } 
    }   
    if ($team==$locteam) {
        echo "&lt;div class='averageloc' style='display:none'&gt;This div has to be shown/hidden for local team&lt;/div&gt;";
    }   
    if ($team==$visteam) {
        echo "&lt;div class='averagevis' style='display:none'&gt;This div has to be shown/hidden for road team&lt;/div&gt;";
    }   
}
?&gt;
</code></pre>