javascript模态弹出窗口继续只填充php中所有项目按钮的第一项数据

Question

我正在实施布料购物网站，我在其中使用管理面板上的图片和说明上传布料项目。在主页上我正在检索库存中的所有布料项目并使用while循环显示。为了查看我已经放置的详细信息＆＃34;查看按钮＆＃34;在点击打开模态弹出窗口并显示该项目的完整描述。但我面临的问题是，点击项目的每个按钮仅显示所有项目按钮上的模态弹出窗口中的第一个项目描述。我希望每个项目按钮都应该显示项目拥有描述。但它会在每个按钮上填充第一项数据。 代码：

<?php 

                $link=mysql_connect("localhost","root","") or die("Cannot Connect to the database!");
                mysql_select_db("login",$link) or die ("Cannot select the database!"); 
                $sql = "SELECT * FROM add_stock"; 
                $result = mysql_query ($sql);                 
                while ($row = mysql_fetch_assoc($result) ) 
                {                          
                ?>     
<div class="grid_element"> 
                <div class="show-image">
                <form method="post" action="" id="myform" >
                <img  src="<?php echo $row['image'] ?>" name="image" onclick="openModal()" id="image" name="image1" target="_parent">

                <figcaption><b>Product Code: <?php echo $row['id']; ?> <br/><?php echo $row['dress_description']; ?> <br/> PKR <?php echo $row['price'];?>  </b>

                </figcaption>
                </form>


                <!-- view button -->
                <button class="update fa fa-eye" id="popupview" onclick="openModal1()"  title="View" type="image"  /></button>

 <!-- View Item modal popup -->
                <div id="mpopupBox" class="mpopup">
                <!-- mPopup content -->
                <div class="mpopup-content">
                <div class="mpopup-head">
                <span class="close7">×</span>

                <h2 style="font-family:Cooper Black;">Item Description</h2>
                </div> 
                <div class="mpopup-main" ><br/>              
                <img  src="<?php echo $row['image']; ?>"  style="width: 300px; height: 300px; border-radius: 25px;">
                <p style="margin-top: -250px; margin-left: 380px; "><font size="4"><b>Product Code: <?php echo $row['id']; ?> <br/>
                PKR <?php echo $row['price']; ?> <br/>
                Brand: <?php echo $row['brand_name']; ?> <br/>
                Gender: <?php echo $row['gender_name']; ?><br/> 
                Category: <?php echo $row['category_name']; ?><br/>
                Size: <?php echo $row['size_name']; ?> <br/>
                Material: <?php echo $row['material_name']; ?> <br/>
                Description: <?php echo $row['dress_description']; ?></font></b> </p>  

                <button style="margin-left: 380px; margin-top: 20px; width: 135px;" class="button button4 add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</button>
                </div>
                <div class="mpopup-foot">
                <!-- <p>created by CodexWorld</p> -->
                </div>
                </div>
                </div>


                <script type="text/javascript">
                var mpopup = document.getElementById('mpopupBox');
                // get the link that opens the mPopup
                var mpLink = document.getElementById("popupview");
                // get the close action element
                var close7 = document.getElementsByClassName("close7")[0];
                // open the mPopup once the link is clicked
                mpLink.onclick = function() {
                mpopup.style.display = "block";
                }
                var imagess = document.querySelectorAll('button[title="View"]');
                for(var i=0, len = imagess.length; i < len; i++){
                imagess[i].addEventListener('click', openModal1);
                }
                function openModal1() {
                mpopup.style.display = "block";       
                }
                // close the mPopup once close element is clicked
                close7.onclick = function() {
                mpopup.style.display = "none";
                } 
                </script>
</div>
</div>