Modal window doesn't load propper results - php

Question

I have few thumbs on the page which are loaded from mysql database. Now I want to make button view on them and when I click to open modal windows with more info.
The problem is that always is opening first item on each thumb(different id). This is what I've using. I guess the problem is in the button but can't figured out how to fix it.
foreach($pdo->query("SELECT * FROM projects ORDER BY project_id") as $row)
{
echo '<div class="portfolio-item '.$row['project_category'].'">';
echo '<div class="portfolio">';
echo '<a href="#" data-lightbox-gallery="portfolio">';
echo '<img src="'.$row['project_image'].'" alt="Portfolio 1">';
echo '<div class="portfolio-overlay hvr-rectangle-out">';
echo '<h2 class="margin-bottom-small">
<strong class="white-color bold-text"></strong>
</h2>';
echo '<div class="button" data-toggle="modal" data-target="#portfolio-4">View More</div>';
echo '</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
<div class="modal fade contact-form" id="portfolio-4" tabindex="-1" role="dialog" aria-labelledby="portfolio-4" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body member-info">
<div class="row">
<div class="col-md-5 col-sm-5">
<figure>
<img src="'.$row['project_image'].'" alt="">
</figure>
</div>
<div class="col-md-7 col-sm-7">
<div class="description">
<h3><strong class="bold-text">'.$row['project_overlay'].'</strong></h3>
<div class="light-text">'.$row['project_title'].'</div>
<div class="about margin-top-medium">
<p>'.$row['project_details'].'</p>
</div>
</div> <!-- *** end description *** -->
</div> <!-- *** end col-md-7 *** -->
</div> <!-- *** end row *** -->
</div> <!-- *** end modal-body *** -->
</div> <!-- *** end modal-content *** -->
</div> <!-- *** end modal-dialog *** -->
</div> <!-- *** end Contact Form modal *** -->
</div> <!-- *** end portfolio-item *** -->';
}

Answer 1

At a simple glance (I can't tell what plugin you are using) I would check this line : ... div class="modal fade contact-form" id="portfolio-4"
the button triggers this modal data-target="#portfolio-4">
So I would get the index of every row and append it to the id of the modal, then in the button data-target I would also append that index... (so IDs are different) Hope it helps, I did the same but using bootstrap.