Passing unique value in html modal box from php for each loop

Question

I have a PHP for loop, and inside my php for loop I have a html modal box. My PHP for loop fetch data from db and echo it into div tags(Image Attached)Div List Image. And each div tag has a modal box, so whenever I click on an div element I got a modal box like this appearsModal Box. The problem is no matter which div I click I get the same one div values on the Modal box. All I want was whichever Div element I click I should get that particular values on the modal box.

I also Understand that I can pass a unique Id inside my modal box. But Is there an another way to achieve as I will also have a HTML web form inside the modal box as well.

Thank you in Advance :)

My php and html code:

  <?php
   foreach($results as $data){
    $id = $data['no'];
    $title = $data['Title'];
    $description = $data['Description'];
    $date = $data['Date_Submitted'];
    $total = $data['totalNumber'];

    //Echo the data from db into div elements

  echo '<div class="row">
        <div>
                    <h4>'.$total.'</h4>
                    <h6>Submittions</h6>
        </div>
        <div class="col-md-1">
                    <h4>'.$id.'</h4>
                    <h6>ID</h6>
        </div>
        <div class="myBtn">                // myBtn to get the modal box
        <h4>'.$title.'</h4>
        <h6>'.$description.'</h6>
        </div>
        <div>
            <p>'.$date.'</p>
        </div>   
        </div><hr>  // end of div element

            <div class="modal myModal">     //Modal Box
            <div class="modal-content">    // Modal Box -Content
               <span class="close">&times;</span>
                 <div>
                     <div class="side-form">
                        <div class="row">
                          <div>
                          <h6>'.$date.'</h6>
                         </div>
                     </div>
                    <h3>'.$title.'</h3><hr>
                    <p>'.$description.'</p><hr>
              </div>

        <form method="get" class="submittion_from">
            <fieldset>
                <label>NO</label> 
                <label >YES</label>    
                </fieldset><br>
                <input type="text" name="id" value='.$id.'><br>
                 <fieldset>
                      <label>XYZ</label>
                            <input type="radio" name="optradio" value="NO">     
                            <input type="radio" name="optradio" value="YES">
                </fieldset><br>
                <fieldset>
                     <label>XYZ</label>
                            <input type="radio" name="optradio1" value="NO">  
                            <input type="radio" name="optradio1" value="YES">
               </fieldset><br>
               <fieldset>
                      <label>XYZ</label>
                            <input type="radio" name="optradio2" value="NO">                           
                            <input type="radio" name="optradio2" value="YES">
              </fieldset><br>
              <fieldset>
                      <label>XYZ</label>
                            <input type="radio" name="optradio3" value="NO">                          
                            <input type="radio" name="optradio3" value="YES">
             </fieldset><br>
          <a name="submit" value="Submit" type="submit" id="no" class="btn align-bottom btn-default">Submit</a>
    </form>
          </div>            


                </div>

            </div>';
          }
           ?> 

and my Javascript to display modal box:

        <script>
// Get the modal
var modal = document.getElementsByClassName('myModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
for(var i = 0 ; i < btn.length;i++){

    btn[i].onclick = function() {
                modal[2].style.display = "block";
}
}

for(var i = 0 ; i < span.length;i++){

    span[i].onclick = function() {
    modal[2].style.display = "none";
}
}
// When the user clicks on <span> (x), close the modal

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal[0]) {
        modal[2].style.display = "none";
    }
}
</script>

Answer 1

The problem you encountered is that you do not have access to the variable i in the for loop where you generate click event handlers for the buttons

btn[i].onclick = function() {
            modal[2].style.display = "block";
} 

One solution for this is to declare a function separately with a parameter called index

    function display(index) {
            modal[index].style.display = "block";
    } 

and in the PHP code before the foreach loop, set $index = 0, then inside the loop where you generate button assign the function in the attribute with $index

<div class="myBtn" onclick="display('.$index.')">    
    <h4>'.$title.'</h4>
    <h6>'.$description.'</h6>
</div>
$index++;

Answer 2

You're looping out an element that contains an ID (the ID is no). When this gets looped, you end up with duplicate elements on the page with the same ID. This is not only invalid HTML, but what is responsible for this problem.

To resolve this, you'll either need to use incremental IDs using the index from the loop, or preferably use classes:

<a name="submit" value="Submit" type="submit" class="no"...