如何在图像上添加多个边界框

Question

我一直在研究用于图像标记的代码。我设法在图像上绘制边框。我面临的问题是我不能在图像上绘制多个边界框。因此，当我绘制第一个框然后开始绘制第二个框时，第一个框消失了。

我在这里附上了小提琴：

jsfiddle

HTml：

<div class="imgside">
<img src="https://i.ibb.co/KjtMGdm/fashion.jpg" alt="fashion" id="imgside" width="100" height="100">
</div>
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close">&times;</span>

<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<div class='dynamic_text' style='display:none;'></div>

<img class="modal-content" id="img01" src="fashion.jpg">

</div>
<div class="text_container">

<br>
<div class="img_text">

</div>
<div class="input_tag">
  <span class="right_sec_text">Select a region from the picture</span>
  <div class="error"></div>

  <div class="tags">

  </div>
  <div class="input_box">
    <input type="text" name="tags" class="input_textbox">
    <button id="settag" class="btn_settag">Set Tag</button>
  </div>

  <input type="hidden" name="x1" id="x1" value="-">
  <input type="hidden" name="y1" id="y1" value="-">
  <input type="hidden" name="x2" id="x2" value="-">
  <input type="hidden" name="y2" id="y2" value="-">
  <input type="hidden" name="w" id="w" value="-">
  <input type="hidden" name="h" id="h" value="-">

  <div class="footer_btn">
    <p><button class="btn_success">Confirm Selection</button>
      <p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>

  </div>
</div>

JavaScript：

 function preview(img, selection) {
 if (!selection.width || !selection.height)
    return;
 $('#x1').val(selection.x1);
 $('#y1').val(selection.y1);
 $('#x2').val(selection.x2);
 $('#y2').val(selection.y2);
 $('#w').val(selection.width);
 $('#h').val(selection.height);
 $('.img_error').removeClass("error");
 }

 $(function() {
  $('#img01').imgAreaSelect({
    handles: true,
    fadeSpeed: 200,
    onSelectChange: preview,
    parent: $('#myModal')
   });
  });

  var modal = $('#myModal'),
  img = $('#imgside'),
  modalImg = $('#img01'),
  span = $('.close').first();

  img.on('click', function() {
  modal.css('display', "block");
  modalImg.attr('src', $(this).attr('src'));
 });

 span.on('click', function() {
 console.log('close!');
 modal.css('display', "none");
 });

我已附上以下窗口的屏幕截图：

上面的显示了图像标记的窗口，在该窗口中我只能绘制一个边界框，而我想在图像上绘制多个框。

有人可以帮我修复它。