JSFiddle - React, Tailwind, and code Playground

HTML

<input id="imgInput" type="file"  name="file[]" multiple style="display:none;"/>
        <input type="button" onclick="$('#imgInput').click();" value="Choose File" />
         <output id="result" ></output>

    <div style="margin-top:150px;" id="uploadedcontent"></div>

CSS

span.boxclose
        {
          border: 1px solid #AEAEAE;
border-radius: 5px;
display: inline-block;
line-height: 0px;
padding: 0px 0px;
z-index: 100000;
position: absolute;
height: 17px;
width: 16px;
margin-left: -8px;
margin-top: -8px;
}
div.divclass
{
    height:105px;
    width:120px;
    background-color:#f0f0f0;
    border-radius:10px;
    margin-left:30px;
    position:relative;
    float:left;
    margin-top:30px;
}
.demo
{
	width: 300px;
	height: auto;
	/*border-top: solid 1px #BBB;
	border-left: solid 1px #BBB;
	border-bottom: solid 1px #FFF;
	border-right: solid 1px #FFF;*/
	background: #FFF;
	overflow: hidden;
	padding: 5px;
	background-color:transparent;
}
li
{
    list-style-position:inside;
    list-style-type:circle;
    
}

JavaScript

var ftype = new Array(), count1 = 0;
        
        $("#imgInput").change(function () {
            readURL(this);

        });
        function readURL(input) {
            var files = input.files;
            var output = document.getElementById("result");
            
           
            
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var picReader = new FileReader();
                var divid = 'div_' + i;
                var spanid = 'span_' + i;
                var count = 0;
                picReader.addEventListener("load", function (event) {
                    var picFile = event.target;
                    var picnames = files[count].name;
                    var mimetypes = picFile.result.split(',');
                    var mimetype1 = mimetypes[0];
                    var mimetype = mimetype1.split(':')[1].split(';')[0];
                    count++;
                    count1++;
                    var div = document.createElement("div");
                    div.setAttribute('id', 'div_' + count);
                    div.setAttribute('class', 'divclass');
                    if (mimetype.match('image')) {
                        div.innerHTML = "<img id='img_" +  count1 + "' class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";

                    }
                   
                    output.insertBefore(div, null);

                });

                picReader.readAsDataURL(file);
            }
        }
        

$('body').on('click','.boxclose','',function(e){
       var spanid = $(this).attr('id');
            var splitval = spanid.split('_');
            $('#div_' + splitval[1]).remove();
});