How to create two Instances of the Simple Ajax Uploader Dropzone in One Project but in different modals

Question

Two things not working:

1. During Upload Progress Bar is not Working
2. Implementation of this code in two different Bootstrap Modals but working separately and Independently in both modals.

I tried to change the ID progressContainer in HTML part of a Modal Body to progressContainer2 and var uploader in JavaScript to uploader2 thought may be it will work but by doing so uploaded file or ProgressContainer shows in just one Modal and other stops working.

How to make it work separately independent in both modals?

var uploader;

function createUploader(i, elem) {

  var elem = $(elem);
  var type = elem.data("type");
  var dropzone = elem.find('.uploadDropzone');
  var btn = elem.find('.btnUpload');
  var progBox = elem.find('.uploadProgress');
  var msgBox = elem.find('.uploadMessage');
  var maxsize = 20000;

  function showUploadMessage(msg, result) {
    msgBox.text(msg).addClass(result).show();
  }

  function hideUploadMessage() {
    msgBox.text('').removeClass('error').removeClass('unknown').removeClass('success').hide();
  }

  //create uploader(s)

  uploader = new ss.SimpleUpload({
    button: btn,
    dropzone: dropzone,
    /*url: 'your_php_file.php',*/
    name: 'uploadfile',
    progressBar: progBox,
    multipart: true,
    disabledClass: 'disabled',
    responseType: 'json',
    allowedExtensions: ["pdf"],
    maxSize: maxsize,
    multiple: true,
    multipleSelect: true,
    maxUploads: 10,
    queue: false,
    startXHR: function() {},
    onSubmit: function(filename) {

      hideUploadMessage(); //hide any previous errors

      const progressBox = document.getElementById('progressContainer');

      const wrapper = document.createElement('div')
      wrapper.className = 'row ps-0 wrapper';

      const fileNamef = document.createElement('div');
      fileNamef.className = 'col-6 pe-0 name';
      fileNamef.innerHTML = '<span>' + filename + '</span>';

      const fileSize = document.createElement('div');
      fileSize.className = 'col-2 d-flex justify-content-center size';

      const progress = document.createElement('div');
      progress.className = 'col-3 progress me-0 mt-2';
      const bar = document.createElement('div');
      bar.className = 'progress-bar';

      const close = document.createElement('button');
      close.className = ' col-1 d-flex justify-content-end deleteAttachment';

      // Assemble the progress bar and add it to the page

      wrapper.appendChild(fileNamef);
      wrapper.appendChild(fileSize);
      progress.appendChild(bar);
      wrapper.appendChild(progress);
      wrapper.appendChild(close);

      progressBox.appendChild(wrapper);

      $(wrapper).data('file', filename);


      this.setProgressBar(bar);
      this.setFileSizeBox(fileSize);
      this.setAbortBtn(close);
      //this.setProgressContainer(wrapper); // designate the containing div to be removed after upload
    },

    onSizeError: function() {
      var msg = 'Files may not exceed ' + maxsize + 'k.';
      showUploadMessage(msg, 'error');
    },

    onExtError: function() {
      var msg = 'Please select only PDF file';
    },

    onComplete: function(filename, response) {

      $('.wrapper').filterByData('file', filename).addClass('success'); //add a 'completed' class to the wrapper when file succeeds.

      if (!response) {
        var msg = 'Unable to upload file(s).';
        showUploadMessage(msg, 'error');
        return;
      }

      if (response.success === true) {

        //things to do after complete, such as show image;
        $(file.previewElement).find(".dz-image img").replaceWith('<i class="fa fa-file-pdf-o"></i>');
      } else {

        if (response.msg) {
          var msg = escapeTags(response.msg);
          showUploadMessage(msg, 'error');
        } else {
          var msg = 'Sorry! Unable to upload one of your files.';
          showUploadMessage(msg, 'error');
        }
      }
    },
    onError: function() {

      var msg = 'Unable to upload file(s) to server.  Please try again later.';
      showUploadMessage(msg, 'error');
      $('.wrapper').removeClass('success').addClass('error');

    }

  });
}

$('.uploadContainer').each(createUploader);

$(document).on('click', '.deleteAttachment', function(e) {

  e.preventDefault();
  var wrapper = $(this).closest('.wrapper');
  wrapper.remove();

  // ... Back-end-dev should add a function to actually delete the image from the server.

});

.uploadContainer {
  position: relative;
}

.uploadDropzone {
  content: "";
  border: 2px dashed #DADBDF;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.uploadDropzone .cloud {
  font-size: 48px;
  line-height: 1;
  opacity: .5;
}

.uploadMessage {
  margin-top: .5rem;
}

.uploadProgress {
  margin-top: .5rem;
  background-color: #fff;
  border: thin solid #aaa;
  border-radius: 3px;
}

.uploadProgress:empty {
  background: none !important;
  margin: 0 !important;
  border: none !important;
}

.wrapper {
  width: auto;
}

.uploadProgress .wrapper {
  position: static;
  background-color: #fff;
  white-space: nowrap;
  border-bottom: thin solid #d2d2d2;
  line-height: 35px;
  padding: 0 0 0 10px;
}

.uploadProgress .wrapper:last-child {
  border-bottom: 0;
}

.uploadProgress .wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.uploadProgress .name {
  display: block;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploadProgress .size {
  display: block;
  float: left;
  white-space: nowrap;
  color: #aaa;
  padding-left: 5px;
}

.uploadProgress .size:before {
  content: "(";
}

.uploadProgress .size:after {
  content: ")";
}

.uploadProgress .progress {
  display: block;
  float: right;
  margin-right: 10px
}

.uploadProgress .deleteAttachment {
  display: block;
  float: right;
  padding: 0;
  background-color: transparent !important;
  border: 0 !important;
  background-image: none;
  line-height: inherit;
}

.deleteAttachment:after {
  content: '\00D7';
  display: block;
  line-height: inherit;
  width: 35px;
  text-align: center;
  color: rgba(0, 0, 0, .3);
  font-family: sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.uploadProgress .wrapper.success {
  color: green;
}

.uploadProgress .wrapper.error {
  color: red;
}

.uploadProgress .error .progress {
  color: gold;
}

.uploadProgress .success .progress {
  color: blue;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/6.0.0-beta.2/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/6.0.0-beta.2/dropzone.js"></script>
<script src="https://btn.ninja/js/SimpleAjaxUploader.min.js"></script>


<div class="col-12 mt-3">
  <div class="uploadContainer">
    <button type="button" class="col-12 btn bg-transparent border-0 link btnUpload">
      <div class="dotdash uploadDropzone">
        <h5>Drag & Drop</h5>
        <p>Your File Here or Browse to Upload</p>
        <small class="text-prime">Only PDF Files with max size of 20 MB</small>
      </div>
    </button>
    <div class="alert uploadMessage" style="display:none;"></div>
    <div class="row">
      <div id="progressContainer" class="col-12 uploadProgress"></div>
    </div>
  </div>
</div>