JCarousel Issue

JCarousel Issue

hi everyone. I have two jcarousels in  one page and only one will work.The prev and next buttons in the second one will perform tha default action-navigate to the home page.is there a why to resolve it and distinguish the carousels? i submit the code generating the carousel and the html part(*thia is done inside an xsl template file).
Thank you i advance.

<xsl:template match="//event">

        <xsl:if test="count(//image) &gt; 6">
            <script type="text/javascript">
                <xsl:text disable-output-escaping="yes"><![CDATA[
  function drawCarousel(index,position) {
    $('#promoCarousel').stop(true, false);
    $('#promoCarousel').animate({left: -110*(index-1)}, 500);
    $('#promoCarousel').get(0).carouselIndex = index;
  }

  jQuery(document).ready(function() {
      var carouselIndex = 1;
      $('#promoCarousel').get(0).carouselIndex = carouselIndex;
      jQuery('#promoCarousel-next').click(function(e) {
          e.preventDefault();
          var carouselIndex = $('#promoCarousel').get(0).carouselIndex;
          if (carouselIndex < ]]></xsl:text>
                <xsl:value-of select="count(//image) - 6"/>
                <xsl:text disable-output-escaping="yes"><![CDATA[) {
                  carouselIndex = carouselIndex + 1;
                  drawCarousel(carouselIndex,1);
           }
        return false;
       });

          jQuery('#promoCarousel-prev').bind('click', function(e) {
                                   e.preventDefault();
              var carouselIndex = $('#promoCarousel').get(0).carouselIndex;
              if (carouselIndex > 1) {
              carouselIndex = carouselIndex - 1;
                  drawCarousel(carouselIndex,-1);
                }
              return false;
          });

        });
        ]]></xsl:text>
            </script>
        </xsl:if>

        <xsl:if test="count(//image) &gt; 0">
            <div id="event_gallery">
                <h3>
                    <xsl:value-of select="Resource:GetConstant('events_photos')"/>
                </h3>
                <xsl:if test="count(//image) &gt; 6">
                    <div class="left_arrow">
                        <a id="promoCarousel-prev" title="{Resource:GetConstant('events_previusPhotos')}" href="#">
                            <span>
                                <xsl:value-of select="Resource:GetConstant('events_previusPhotos')"/>
                            </span>
                        </a>
                    </div>
                </xsl:if>
                <div class="gal_cont" style="height: 105px;overflow: hidden; position: relative;">
                    <ul id="promoCarousel" style="{concat('width: ',110*count(//image),'px; position: absolute;')}">
                        <xsl:apply-templates select="//image" />
                    </ul>
                </div>
                <xsl:if test="count(//image) &gt; 6">
                    <div class="right_arrow">
                        <a id="promoCarousel-next" title="{Resource:GetConstant('events_nextPhotos')}" href="#">
                            <span>
                                <xsl:value-of select="Resource:GetConstant('events_nextPhotos')"/>
                            </span>
                        </a>
                    </div>
                </xsl:if>
            </div>
        </xsl:if>

    </xsl:template>

    <xsl:template match="//image">
        <li style="overflow: hidden">
            <a class="lightbox" href="{@file}" >
                <img alt="" src="{@file}"  />
            </a>
        </li>
    </xsl:template>