JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<h1>Форма</h1>

<table border=0 id="upload_blocks" width="100%">
	<tr class="odd">
		<td valign="top" width="200">
			Фото: <div id="addfrm0"></div>
			<div id="bntAddPhoto"><input type="submit" onclick="newInputAdd(0);" value="+"></div><br>
		</td>
	</tr>					
</table>

JavaScript

function btnDelete(id){
		//document.getElementById(id).remove();		
	}
	
	function newInputAdd(id) {
	  var y = 1;
	  var newId = id + y;     
	  var firstform = document.getElementById('addfrm0');
	  var newinput = document.createElement('input');
	  var br = document.createElement("br");
	  var btnDelete = '<input type="submit" onclick="btnDelete(b0f_'+newId+')" value="x">';
	  newinput.type = "file";
	  newinput.name = "block[file]["+newId+"]";
	  firstform.appendChild(newinput); 
	  firstform.appendChild(br);
	  newinput.insertAdjacentHTML("beforebegin", '<div id="b0f_'+newId+'">');
	  newinput.insertAdjacentHTML("beforebegin", "<span style='color:red'>" + newId + ".</span> ");
	  newinput.insertAdjacentHTML("beforebegin", btnDelete);
	  newinput.insertAdjacentHTML("afterend", "</div>");

	  if(newId > 9){
		var newAdd = '';
	  }else{
		var newAdd = '<input type="submit" onclick="newInputAdd('+newId+')" value="+">';
	  }
	  document.getElementById('bntAddPhoto').innerHTML = newAdd;
	}