How to set dropzone thumbnail dynamically?

Question

I have a makeup template for placing an image thumbnail by order of element and/or by element that is being clicked.

The template for uploading images is like this:

$(document).ready(function(e) {
  $('.upload-field-multiple').each(function(e) {
    var id = $(this).attr('id');
    var previewTemplate = document
      .querySelector('#tpl')
      .innerHTML;
    var default_option = {
      url: '/upload',
      method: "post",
      autoProcessQueue: false,
      uploadMultiple: true,
      maxFiles: 5,
      parallelUploads: 100,
      thumbnailWidth: 80,
      thumbnailHeight: 80,
      timeout: 0,
      paramName: id,
      previewsContainer: '.row-thumbnail',
      previewTemplate: previewTemplate,
    }
    var myUploadObj = new Dropzone('#' + id, default_option);
  })
})

.upload-field-multiple {
  width: 333px;
  height: 188px;
  border: 1px solid black;
}

.row-thumbnail {
  display: flex;
  flex-wrap: wrap;
  margin-top: 7px;
}

.row-thumbnail .thumbnail-item {
  width: 80px;
  height: 48px;
  border: 1px solid black;
}

.row-thumbnail .thumbnail-item:not(:last-child) {
  margin-right: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js">
</script>

<div id="tpl" style="display: none;">
  <div class="dz-preview dz-file-preview thumbnail-item">
    <div class="dz-image"><img data-dz-thumbnail /></div>
  </div>
</div>

<div class="upload-field-multiple dz-message form-controls" id="photo_upload"></div>

<div class="row-thumbnail dropzone-previews">
  <div class="thumbnail-item"></div>
  <div class="thumbnail-item"></div>
  <div class="thumbnail-item"></div>
  <div class="thumbnail-item"></div>
</div>

The boxes are represented the number of files the user can upload. I want the thumbnail to be displayed in each of the box that is being clicked to browse file.

However my problem now is I can only set the preview template content as id #tpl and append it to preview container class .row-thumbnail while leaving the exiting <div class="thumbnail-item"></div> and .upload-field-multiple elements empty.

I am wondering if I can change the dropzone options on the fly as the condition I desired. Please kindly help, thanks.