hidden div not working correctly in for loop using a modal box

I have a mysql select and it spits out all the results in a <ul> that I have setup in a for loop. This works great. However, I wanted to have a "click more" type link at the bottom of each result that opens in a modal box when clicked. I also got this working just fine. What doesn't work, however, is the data inside what is displayed inside the modal box. It displays the data correctly but it is from the first result no matter what result you click. I thought I just didn't have my for loop setup correctly but it works when I change the id of the div the content is in for the modal box (but then the modal box doesn't work obviously).

Is there some reason why hiding a div would mess a for loop up as far as which row to display?

Below is the for loop

        for($i=0; $i<$num_results; $i++)
        {
            $row = mysql_fetch_array($result);

        ?>
        <div id='basic-modal'>
            <ul style="background-color:#F5F5F5; padding:2px;">
                <li class="program" style="font-size:18px;"><strong><?php echo trim ($row["program"]); ?></strong></li>
                <li><strong>Sponsored by:</strong> <i><?php echo trim ($row["organization"]); ?></i></li>            
                <li><strong>Discipline:</strong> <?php echo trim ($row["discipline"]); ?></li>            
                <li><strong>Mission:</strong> <?php echo trim ($row["mission"]); ?></li>            
                <li><strong>Description:</strong> <?php echo trim ($row["content"]); ?></li>            
                <li><strong>Grade(s):</strong> <?php echo trim ($row["grade"]); ?></li>
                <li><strong>Cost:</strong> <?php echo trim ($row["cost"]); ?></li>
                <li>&nbsp;</li> 
                <li><a href="#" class="basic more">Contact Info</a></li>   


            </ul>
            <br />
            <br />
        </div>

        <!-- pop up contact info -->
        <div id="basic-modal-content">
            <ul style="font-size:12px">
                <li class="program" style="font-size:18px;"><strong><?php echo trim ($row["program"]); ?></strong></li>
                <li><strong>Sponsored by:</strong> <i><?php echo trim ($row["organization"]); ?></i></li>            
                <li><strong>Contact Person:</strong> <?php echo trim ($row["contact"]); ?></li>            
                <li><strong>Contact Email:</strong> <a href="mailto:<?php echo trim ($row["email"]); ?>"><?php echo trim ($row["email"]); ?></a></li>            
                <li><strong>Contact Phone:</strong> <?php echo trim ($row["phone"]); ?></li>            
                <li><strong>Contact Hours:</strong> <?php echo开发者_如何学C trim ($row["contactHours"]); ?></li>            
            </ul>
        </div>

        <!-- preload the images -->
        <div style='display:none'>
            <img src='images/x.png' alt='' />
        </div>            

        <?php
        }
        ?>

I'm using Eric Martin's SimpleModal if that makes a difference. Thanks for the help.

You have same id of each div it is wrong