jquery cycle for each div

Question

I want to make several (more than 12) slideshows on one page, which will animate on mouse hover. Right now only first div is animated. Here's my code:

jQuery:

$(document).ready(function() {
  $('#reference').each(function() {
    $(this).cycle({
      speed:      200, 
      //timeout:     0, 
      fx:     'fade',
    });
  });
});

HTML:

<div class="columns-3">
    <div class="column firstCol">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column lastCol">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
</div>
<div style="clear:both;"></div>

Thanks in advance!

Answer 1

you should pass a class and not a unique div ID. jQuery:

$(document).ready(function() {
  $('.reference').each(function() {
    $(this).cycle({
      speed:      200, 
      //timeout:     0, 
      fx:     'fade',
    });
  });
});

edit (by and thanks to Gerald Schneider :) ):

you can also do this:

$('.reference').cycle({ speed: 200, fx: 'fade' });

HTML:

<div class="columns-3">
    <div class="column firstCol">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column lastCol">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                    <img src="images/img2.png" />
            </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>