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](https://i.stack.imgur.com/JhXAx.png). And each div tag has a modal box, so whenever I click on an div element I got a modal box like this appears[Modal Box](https://i.stack.imgur.com/gKos3.png). 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>

```