JSFiddle - React, Tailwind, and code Playground

HTML

<title>Previzualizare test</title>
<body>
<div id="center2">
  <div id="forme">
		
 <form method="post" action="edit_posts.php?editare=2" enctype="multipart/form-data" id="mainform">
    
	 Imagine 1:<br>
   	 <input type="file" name="img1" id="img1"><br>
	 	 <br><br>     
	Imagine 2 :<br>
     <input type="file" name="img2" id="img2"><br>
		 <br>
     Imagine 3 :<br>
     <input type="file" name="img3" id="img3"><br>
		 <br>
     Imagine 4 :<br>
     <input type="file" name="img4" id="img4"><br>
		 <br>
	 Imagine 5 :<br>
     <input type="file" name="img5" id="img5"><br>
		 <br>
     Imagine 6 :<br>
     <input type="file" name="img6" id="img6"><br>
		 <br>
     Imagine 7 :<br>
     <input type="file" name="img7" id="img7"><br>
		 <br>
     Imagine 8 :<br>
     <input type="file" name="img8" id="img8"><br>
		 <br>
     Imagine 9 :<br>
     <input type="file" name="img9" id="img9"><br>
		 <br>
     Imagine 10 :<br>
     <input type="file" name="img10" id="img10"><br>
		 <br>
     Imagine 11 :<br>
     <input type="file" name="img11" id="img11"><br>
		 <br>
     Imagine 12 :<br>
     <input type="file" name="img12" id="img12"><br>
		 <br>
     Imagine 13 :<br>
     <input type="file" name="img13" id="img13"><br>
		 <br>
     Imagine 14 :<br>
     <input type="file" name="img14" id="img14"><br>
		 <br>
     Imagine 15 :<br>
     <input type="file" name="img15" id="img15"><br>
		 <br>
Continut:<br>
   	 <textarea id="insert" name="content" placeholder="Introduceti date despre articol" rows="25" cols="50"><p>1. Cautare secventiala
<br>
2. Cautare binara
<br>
<img src="" id="img3">
3. Interclasare 
<br>
4. Metode de sortare (Interschimbare, Metoda bulelor)</p><img src="" id="preview-img1">
<img src="" id="preview-img2">
<img src="" id="preview-img3">
<img src="" id="preview-img9">
<img src="" id="preview-img5">;</textarea><br> 
	 <br />
	 Preview:
   	 <br />
   	 <input type="checkbox" id="previz" />Preview
   	 <br />
   	 <div class="arata" style="display:...

JavaScript

var j;
    var i="1"; 
	var countd;
	var counti;
	var titlei = "title";
	var continuti = "insert";
	var cuvci = "keywords";
	var autori = "author";
	var continut = $("#"+continuti).val();
	var titlu = $("input[name='"+titlei+"']").val();
	var cuvc = $("input[name='"+cuvci+"']").val();
	var autor = $("input[name='"+autori+"']").val();
	var vt = "#center2 #forme";
	var vc =  vt + " #previz";
	//De tipul form#idformular
	var numeformular= "form#mainform";
	// principdiv trebuie sa contina un spatiu la final !!!
	var principdiv = "#center2 #vezi ";
	var h1titlu = "h1";
	var pcontinut= "p";

     $(vc).change(function(){
	continut = $("#"+continuti).val();
	
	if(this.checked){
	console.log(titlu+" , "+autor+" , "+cuvc);
	//Titlu
	if(titlu != '' && titlu != undefined){
	$(principdiv+h1titlu).html(titlu);
	
	}
	//Continut
	if(continut != '' && continut != undefined){
	$(principdiv+pcontinut).html(continut);
	
	}
	}
	for(i=1;i<15;i++){
	j = $("form#mainform #img"+i);
	readURL(j);
	}
	});
 

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

            reader.onload = function (e) {
                imgId = '#preview-'+$(input).attr('id');
                $(imgId).attr('src', e.target.result);
            }

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


      $("form#mainform input[type='file']").change(function(){
        readURL(this);
		console.log(this);
      });