JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="col-sm-6">
  <div class="file-upload-container">
    <div class="row">

    </div>
    <input type="file" multiple class="d-none" name="files">
    <button type="button" class="upload-file btn btn-primary">Browse Files</button>
  </div>
</div>

<div class="col-sm-6">
  <div class="file-upload-container">
    <div class="row">

    </div>
    <input type="file" multiple class="d-none" name="files">
    <button type="button" class="upload-file btn btn-primary">Browse Files</button>
  </div>
</div>

CSS

img {
  width: 150px;
}

JavaScript

$('.upload-file').on('click', function() {
	$(this).parent().find('input[type="file"]').click();
  $(this).parent().find('input[type="file"]').on('change', function(event) {
  	console.log("test");
    var input = this;
    var reader = new FileReader();
    reader.onload = function (e) {
      var imageTemplate = '<div class="col-xs-4">' +
      	'<div class="thumbnail">' +
          '<img src="'+e.target.result+'">' +
          '<input type="hidden" name="'+$(input).attr('name')+'[]" value="'+e.target.result+'">' +
      	'</div>' +
      '</div>';
      $(input).parent().find('.row').append(imageTemplate);
    }
    reader.readAsDataURL(this.files[0]);
  })
})