JSFiddle - React, Tailwind, and code Playground

HTML

<form enctype="multipart/form-data" action="" method="post">
    <div id="filediv">
        <input name="file[]" type="file" id="file"/>
    </div><br/>	
    <input type="submit" value="Upload File" name="submit"/>
</form>

CSS

#file{
    color:green;
    padding:5px; border:1px dashed #123456;
    background-color: #f9ffe5;
}

#x{ 
    width: 17px;
    height: 17px;
    border: none; 
    margin-left: -20px;
    margin-top: 1px;
	cursor: pointer;
    position: absolute;
}

.abcd img{
    height:100px;
    width:100px;
    padding: 5px;
    border: 1px solid rgb(232, 222, 189);
}

JavaScript

var abc = 0;
$(document).ready(function() {
$('body').on('change', '#file', function(){
	if (this.files && this.files[0]) {
		abc += 1;	
		$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
	   
		var reader = new FileReader();
		reader.onload = imageIsLoaded;
		reader.readAsDataURL(this.files[0]);
	   
//		$(this).hide();
		$("#abcd"+ abc).append($("<img/>", {id: 'x', src: 'x.png', alt: 'delete'}).click(function() {
			$(this).parent().remove();
		}));
	}
   	$(this).after($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'file[]', type: 'file', id: 'file'})
   	));
});

//To preview image     
    function imageIsLoaded(e) {
        $('#previewimg' + abc).attr('src', e.target.result);
    };
});