Javascript 如何在图像上应用边界框

我一直在编写一个图像标记代码，我有一组图像，从中我使用php显示了三个随机图像。因此，当用户单击图像时，会弹出一个模式，并在图像上方显示一个默认边界框用于标记的屏幕。我已附上下面的模态图像。我的代码的问题是；我希望无论何时单击，默认边界框都会显示在图像上，但问题是默认边界框仅显示在第一个图像上，当单击第二个图像时，边界框不会显示在图像上

用于检索3个随机图像的代码：

 $dire="Annotated Dataset/images/";
 $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
 shuffle($images);
 $images=array_slice($images,0,3);
 $_SESSION['images']=$images;

当我在屏幕上显示这3幅图像后

 $gallery=$_SESSION['images'];

 <div id="gallery ">

  <?php
foreach ($gallery as $i) {
    ?>

    <img href="#myModal" data-toggle="modal" data-target="#myModal" src="<?php echo "$i"; ?>" class="modal_img">
 
   <?php }
   ?>

图2：带有默认边界框的模式屏幕

上图显示了图像上方的边界框。但这是用户单击的第一个图像，当用户关闭此图像并单击另一个图像时，即模式popsup，但上面没有显示边界框。我想框显示在所有的图像时，点击不只是第一个。我想不出哪里出了错。有人能帮我解决这个问题吗。谢谢你

 <div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close">&times;</span>
<input type="hidden" id="result"></input>

<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">

<img class="modal-content" id="img01">

</div>

<div class="footer_btn">
   <input type="text" id="name_tag" name="name_tag"><br><br>
   <p><button class="btn_success" id="btn_add" value="add areas">Confirm</button>
 </div>
      
   </div>

  $(function(){
    let modal = $('#myModal')
    $(".modal_img").on("click",function(){
    var src = $(this).attr("src");
    modal.css({"display": "block"});
    $("#img01", modal).prop("src",src);
    console.log(src);

   $('#img01').selectAreas({
     minSize: [10, 10],
     onChanged: debugQtyAreas,

     maxAreas:1,

     parent: $('#myModal'),
     areas: [
       {
         x: 10,
         y: 20,
         width: 60,
         height: 100,
       }]
     });
      
     $('.close').click(function(){
       $('#img01').selectAreas('reset');
     });
  });