I have multiple slideshow in one page. My problem is that I can't have the page counter for each slideshow. (It appears only on the first one)

Here my JQuery code :

1. $(document).ready(function() {
2. $('.slideshow').each(function(){
3. $(this).cycle({
4. speed:1, 
5. timeout: 0,
6. next: $('.slideright', $(this).parent()),
7. prev: $('.slideleft', $(this).parent()),
8. after: onAfter
9. });
10. });
11. });
12. 
    
13. function onAfter(curr,next,opts) {
14.     var caption = (opts.currSlide + 1) + ' / ' + opts.slideCount;
15.     $('#counter').html(caption);
16. }

Here an exemple of my html code 

Any idea? Please help me out if I'm on the right way with this....Thanks in advance.

3. <div class="slidecontein"> 
4. <div class="slideleft"> </div>
5. <div class="slideright"> </div>
7. <div class="slideshow"> 
8. <div class="slide1">
9. <img src="../imgs/01.jpg" width="800" height="600"/>
10. </div>
11.  
12. <div class="slide2">
13. <img src="../imgs/02.jpg" width="800" height="600"/> 
14. </div>
16. <div class="slide3">
17. <img src="../imgs/03.jpg" width="800" height="600"/>
18. </div>
20. </div> <!-- END slideshow -->
21. <div id="counter"></div>            <!-- my page counter -->
22. </div><!-- END slidecontein -->
23. 
    
25. <div class="slidecontein"> 
26. <div class="slideleft"> </div>
27. <div class="slideright"> </div>
29. <div class="slideshow"> 
30. <div class="slide1">
31. <img src="../imgs/10.jpg" width="800" height="600"/>
32. </div>
33.  
34.  <div class="slide2">
35. <img src="../imgs/11.jpg" width="800" height="600"/> 
36. </div>
38. <div class="slide3">
39. <img src="../imgs/12.jpg" width="800" height="600"/>
40. </div>
42. </div> <!-- END slideshow -->
43. <div id="counter"></div>            <!-- my page counter -->
44. </div><!-- END slidecontein -->
45.