JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="file" name='images[]' class="gallery-photo-add" id='image1' />
  <input type="file" name='images[]' class="gallery-photo-add" id='image2' />
  <input type="file" name='images[]' class="gallery-photo-add" id='image3' />
  <input type="file" name='images[]' class="gallery-photo-add" id='image4' />
</form>
<div class="gallery"></div>

JavaScript

$(function() {
  // Multiple images preview in browser
  var imagesPreview = function(placeToInsertImagePreview) {

    // Empty preview so we can safely rebuild it
    $(placeToInsertImagePreview).empty();

    // Get all files
    var elems = document.getElementsByClassName("gallery-photo-add");

    // Loop through each file and append them to the preview if available
    for (i = 0; i < elems.length; i++) {
      if (elems[i].files.length != 0) {
        var reader = new FileReader();
				var id = $(elems[i]).attr('id');
        //console.log('Before reader onload: '+id);
        
        reader.onload = (function(id) {
        	console.log('After reader onload: '+id);
          return function(e){
            $($.parseHTML('<img>')).attr({
              'src' : e.target.result,
              'data-id' : id
            }).appendTo(placeToInsertImagePreview);
          }
        })(id);

        reader.readAsDataURL(elems[i].files[0]);
      }
    }
  };

  window.reset = function(e) {
    e.wrap("<form>").closest('form').get(0).reset();
    e.unwrap();
  }

  $('div.gallery').on('click', 'img', function() {
    var id = $(this).attr("data-id");
    reset($('#'+id));
    $(this).remove();
  });

  $('.gallery-photo-add').on('change', function() {
    imagesPreview('div.gallery');
  });
});