JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<div id="form-wrapper">
    <input type="file" class="address" id="address0"/>
    <button type="button" class="addmore">Add More Picture</button>
</div>	
	
    <img id="blah" src="#" style="width:100px;" />
    <img id="blah1" src="#" style="width:100px;" />
    <img id="blah2" src="#" style="width:100px;" />
    <img id="blah3" src="#" style="width:100px;" />

JavaScript

var rowNum = 0;

$("body").on("click", ".addmore", function() {
      rowNum++;
      var $address = $('.address').last();
      var nextHtml = $address.clone();
      nextHtml.attr('id', 'address' + rowNum);
      var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
        if (!hasRmBtn) 
          {
            var rm = "<button type='button' class='rmbtn'>Remove</button>"
            $('.removebtn', nextHtml).append(rm);
          }
      $address.after(nextHtml); 
 });

$("body").on("click", ".rmbtn", function() {
    $(this).parents('.addresses').remove();
});


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#address0").change(function(){
    readURL(this);
});