JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="files" name="files[]" accept="image/gif,image/jpeg"/>

    <input type="hidden" value="0" id="textid"><br>
  
    
<div class="content">
<section class='example'>

<div class='gridly' id="bordergreen">
    

    //placing here all images and span dynmaically 
</div>
</section>
</div>

CSS

/* simple elemnts*/
.content { height: 742px; width:695px;  border:2px solid green; padding: 10px;}
draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 0px 0px 0; font-size: .9em; }

JavaScript

//uploading images within the div

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

   // Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

     // Only process image files.
     if (!f.type.match('image.*')) {
       continue;
     }

     var reader = new FileReader();

     var txtval=$('#textid').val();
     addplus1 = 1;
     txtval=parseInt(txtval)+parseInt(addplus1);
     //txtval+=addplus1;
     alert(txtval);
     $('#textid').val(txtval);
     // Closure to capture the file information.
     reader.onload = (function(theFile) {
       return function(e) {
  
            var div =document.createElement('div');;
        
          div.idName="editableid";
          div.innerHTML = ['<img class="imgclass" src="', e.target.result,
                            '"  width="140px" height="140px" /><br><span class="insidespan" style="color:red" contenteditable="true">Click and type!</span> '].join('');
         
  document.getElementById('bordergreen').insertBefore(div, null);
           
    var spans = document.getElementsByClassName('insidespan');
      	for (var i = 0, len = spans.length; i < len; i++) {
      	    spans[i].onclick = placehodertype;
      	}

    var images = document.getElementsByClassName('imgclass'); 
    	for (var j = 0, leng = images.length; j < leng; j++) {
    		
    		images[j].onclick = RemoveImage;
    	}
         
       
    };
    
      })(f); 

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }

 
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);




function placehodertype() {
	  // alert((this.textContent || this.innerText));
	    var textval=(this.textContent || this.innerText);
	   if(textval=="Click and type!")
	    {
	        $(this).text("");
	        $(this).focus();
	        
	    }
	    
 $(this).blur(function(){
	  var textval2 =(this.textContent...