Pass variable between from PHP to a DIV HTML

Question

I have a web page where I show a series of images brought from a database, these images when passing over shows you a "quick view" message (), clicking on this link shows you on the page a div with the largest image, I need when someone click on this link, in the div show me different images according to what I have clicked, this is my code

PHP/HTML CODE

if ($array->num_rows > 0) {         
   while($row = $array->fetch_assoc()) {
       <div>
        <?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
        <a  href="#" class="js-show-modal1">
            Quick View
        </a>
        </div>
    }
}

JS CODE

$('.js-show-modal1').on('click',function(e){
    e.preventDefault();
    $('.js-modal1').addClass('show-modal1');
});

CSS

.show-modal1 {
  visibility: visible;
  opacity: 1;
}

HTML

<div class="js-modal1">
     <img src="images/someimage.jpg">
</div>

this is what i need , when i click here : <a href="#" class="js-show-modal1"> Quick View </a> Here shows this :

 <div class="js-modal1">
       <img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
 </div>

Answer 1

Make a counter outside the loop that we will use for indexing and targeting the correct modal.

I stored the target modal in a data-property of the <a></a> tags in which I used data-target .

if ($array->num_rows > 0) {
  // initialize counter
  $index = 0;

  while($row = $array->fetch_assoc()) {

    // use the counter in the loop, modal-".$index."
    echo "
      <div>
        <a  href='#' class='js-show-modal' data-target='modal-".$index."'>
          Quick View
        </a>
        <div id='modal-".$index."'>
          <img src='data:image/jpeg;base64,".base64_encode($row['picture'])."' />
        </div>
      </div>";

    // increment
    $index++;
  }
}

Then use this script below. We added an onclick event handler to .js-show-modal which will be all the <a></a> tags. We will then get data-target property as the selector. I used toggle for switching between hide() and show().

$(document).on('click','.js-show-modal',function(e){
    e.preventDefault();
    var target = '#'+$(this).data('target');
    $(target).toggle();
});