すべてのボタンの最初のアイテムの詳細を表示するモーダルポップアップ

Question

ドレスショッピングウェブサイトを実装しています。ホームページには、個々の「カートに入れる」ボタンが付いたグリッドの説明付きドレスがすべて表示されます。ボタンをクリックすると、モーダルポップアップがアイテム価格と数量とともに表示されます。しかし、各モーダルポップアップは、独自の記述の代わりに最初の項目の説明のみを読み込みます。

<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2()" title="Add to Cart" type="image" style=" margin-top: 90px; margin-left:110px; width: 35px; height: 35px; background: white; " /></button> 

// here is starting modal popup 
<div id="mpopupBox1" class="mpopup1"> 
    <!-- mPopup content --> 
    <div class="mpopup1-content"> 
     <div class="mpopup1-head"> 
      <span class="close8">×</span> 
      <h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>  
     </div> 
     <div class="mpopup1-main" > 
      <br/> 
      <br/>   
      <p> 
       <b>Product Code: <?php echo $row['id']; ?></b> 
      </p> 
      <div style="margin: 30px 40px 40px 250px;"> 
       <p id="demo"> 
        <font size="6" ><b>PKR</b></font> 
        <input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font> 
        <br/> 
       </p> 
      </div> 
      <div style="margin: -75px 60px 40px 0px;" > 
       <label><font size="4">Quantity</font></label> 
      </div> 
      <input style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart"> 
     </div> 
     <div class="mpopup1-foot"> 
      <!-- <p>created by CodexWorld</p> --> 
     </div> 
    </div> 
</div> 

// here is javascript function 
<script type="text/javascript"> 
    var mpopup1 = document.getElementById('mpopupBox1'); 

    // get the link that opens the mPopup 
    var mpLink1 = document.getElementById("mpopupLink1"); 

    // get the close action element 
    var close8 = document.getElementsByClassName("close8")[0]; 

    // open the mPopup once the link is clicked 
    mpLink1.onclick = function() { 
     mpopup1.style.display = "block"; 
    } 

    var images1 = document.querySelectorAll('button[title="Add to Cart"]'); 
    for(var i=0, len = images1.length; i < len; i++){ 
     images1[i].addEventListener('click', openModal2); 
    } 

    function openModal2() { 
     mpopup1.style.display = "block";   
    } 

    // close the mPopup once close element is clicked 
    close8.onclick = function() { 
     mpopup1.style.display = "none"; 
    } 

    // close the mPopup when user clicks outside of the box 

</script> 

Answer 1

<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2($row['id'])" title="Add to Cart" type="image" style=" margin-top: 90px; margin-left:110px; width: 35px; height: 35px; background: white; " /></button> 

// here is starting modal popup 
<div id="mpopupBox1" class="mpopup1"> 
    <!-- mPopup content --> 
    <div class="mpopup1-content"> 
     <div class="mpopup1-head"> 
      <span class="close8">×</span> 
      <h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>  
     </div> 
     <div class="mpopup1-main" > 
      <br/> 
      <br/>   
      <p> 
       <b>Product Code: </b><span id="row_id"><?php echo $row['id']; ?></span> 
      </p> 
      <div style="margin: 30px 40px 40px 250px;"> 
       <p id="demo"> 
        <font size="6" ><b>PKR</b></font> 
        <input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font> 
        <br/> 
       </p> 
      </div> 
      <div style="margin: -75px 60px 40px 0px;" > 
       <label><font size="4">Quantity</font></label> 
      </div> 
      <input style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart"> 
     </div> 
     <div class="mpopup1-foot"> 
      <!-- <p>created by CodexWorld</p> --> 
     </div> 
    </div> 
</div> 

// here is javascript function 
<script type="text/javascript"> 
    var mpopup1 = document.getElementById('mpopupBox1'); 

    // get the link that opens the mPopup 
    var mpLink1 = document.getElementById("mpopupLink1"); 

    // get the close action element 
    var close8 = document.getElementsByClassName("close8")[0]; 

    // open the mPopup once the link is clicked 
    mpLink1.onclick = function() { 
     mpopup1.style.display = "block"; 
    } 

    var images1 = document.querySelectorAll('button[title="Add to Cart"]'); 
    for(var i=0, len = images1.length; i < len; i++){ 
     images1[i].addEventListener('click', openModal2); 
    } 

    function openModal2(id) { 
     //write the code to fetch data from Database using that id. I am not sure about your database details. So please do it yourself. 
     document.getElementById('row_id').value = name(javascript variable);// like this push value to every element you want to show 
     mpopup1.style.display = "block";   
    } 

    // close the mPopup once close element is clicked 
    close8.onclick = function() { 
     mpopup1.style.display = "none"; 
    } 

    // close the mPopup when user clicks outside of the box 

</script>