JQuery Cycle - Multiple Slideshows each with Separate Captions and Number Count - Captions for #s2 do not show up, A better way to streamline?

JQuery Cycle - Multiple Slideshows each with Separate Captions and Number Count - Captions for #s2 do not show up, A better way to streamline?

Howdy, I'm new to using jquery cycle. I'm working on a portfolio site and wanted a similar slideshow look to indexhibit for separate projects presented. So far, I'm testing with 2 slideshows and have stated both of them (#s1 and #s2) in my galeries.js file. The images do transition correctly, but the caption and number count only work for #s1. When I tried naming the caption and number differently by adding a '2' such as 'output2' and 'indice2' breaks the javascript.

Could anyone tell me what I'm doing wrong, and is there a way to streamline the look into one code? I plan to have multiple slideshows, and would be nice to not have to state each slide individually.

html for #s1
  1.  <div class="content">
                   
                    <ul class="container">
                   
                        <li class="grid_820">
                        
                        
                        
                                              <div id="s1" class="cadre_contenu">
          <img class="horiz" src="../img/ITYS_logo-01.png" alt="I Think Youre Swell Logo"/>
          <img class="horiz" src="../img/ITYS_site-01.png" alt="I Think Youre Swell Website"/>
         
    </div>

                           
                            <h4><div id="output"></div> <div id="indice"></div></h4>
                           
                           
                        </li> 

















html for #s2
  1.  <div class="content">
                   
                    <ul class="container">
                   
            <li class="grid_820">
          
            <div id="s2" class="cadre_contenu">
          <img class="horiz" src="../img/saenai_site-01.png" alt="Saenai Website"/>
          <img class="horiz" src="../img/saenai_branding-01.png" alt="Saenai Branding"/>
         
    </div>
        
                          <h4><div id="output"></div> <div id="indice"></div></h4> 
                        </li> 













and my .js

  1. $(document).ready(function(){
      $('#s1').cycle({
        fx:     'fade',
        speed:  450,
        timeout: 0,
        next:   '#next, #s1',
        prev:   '#prev',
        pause: 1,
        after:   onAfter
      });
      $(".menu").fadeTo("slow", 0.3);
      $(".menu").hover(function(event){
        $(this).stop().fadeTo("slow", 1);
      },
      function(){
        $(this).stop().fadeTo("slow", 0.3);
      });
      $(".fleche").css('opacity','0');
      $(".fleche").fadeTo(2000, 0.4);
      $(".fleche").hover(function(event){
        $(this).stop().fadeTo("fast", 1);
        },
        function(){
          $(this).stop().fadeTo("slow", 0.4);
        });
    });

    function onAfter(curr,next,opts) {
      $('#output').html(this.alt);
      var caption = (opts.currSlide + 1) + ' / ' + opts.slideCount;
        $('#indice').html(caption);
     }

     
     
    $(document).ready(function(){
      $('#s2').cycle({
        fx:     'fade',
        speed:  450,
        timeout: 0,
        next:   '#next, #s2',
        prev:   '#prev',
        pause: 1,
        after:   onAfter
      });
      $(".menu").fadeTo("slow", 0.3);
      $(".menu").hover(function(event){
        $(this).stop().fadeTo("slow", 1);
      },
      function(){
        $(this).stop().fadeTo("slow", 0.3);
      });
      $(".fleche").css('opacity','0');
      $(".fleche").fadeTo(2000, 0.4);
      $(".fleche").hover(function(event){
        $(this).stop().fadeTo("fast", 1);
        },
        function(){
          $(this).stop().fadeTo("slow", 0.4);
        });
    });

    function onAfter(curr,next,opts) {
      $('#output').html(this.alt);
      var caption = (opts.currSlide + 1) + ' / ' + opts.slideCount;
        $('#indice').html(caption);
     }
     
      







































































the temporary location: dausign.com/main.html

if you click on portfolio, you'll find the first one, I Think Youre Swell, and then the 2nd is Saenai.

Any help would be greatly greatly appreciated!!!

thanks!
Dan