Fancybox (lightbox) in a loop??

I am trying to get the light box to load within the loop by clicking on an anchor tag.. I can get the lightbox to show but it always displays the content of the first “post?”. In short all I need is for a way to add 1 to each item in the loop. So my code looks something like this:

<a href="#more-info" class="fancybox">Open Me</a>

<div id="more-info" style="display:none; width:100%;">
<p>this would be my content</p>
</div>

So what is happening is each item in the loop gets an anchor tag linking to #more-info, and has a div id of “more-info”. Because of this the content being pulled into the light box is always the first item of the loop.

I need a way for it to run more like this: (adding 1 to each item in loop)

<a href="#more-info" class="fancybox">Open Me</a>

<div id="more-info" style="display:none; width:100%;">
<p>this would be my content</p>
</div>

<!-- item 2 -->
<a href="#more-info1" class="fancybox">Open Me</a>

<div id="more-info1" style="display:none; width:100%;">
<p>this would be my content for 2nd item</p>
</div>

<!-- item 3 -->
<a href="#more-info2" class="fancybox">Open Me</a>

<div id="more-info2" style="display:none; width:100%;">
<p>this would be my content for item 3</p>
</div>

and so on until the loop runs out.

I was trying <?php $s = 0; ?> then my tags looked like this:

<a href="#<?php echo 'more-info'. $++s; ?>" class="fancybox">Open Me</a>

<div id="<?php echo 'more-info'. $++s; ?>" style="display:none; width:100%;">
<p>this would be my content for item 3</p>
</div>

obviously that is wrong by I cannot seem to get it right without things going haywire.. any suggestions?