JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dv_add">  
<a href="javascript:void(0);" id="anc_add_more">add more file</a>
  </div>

<span id='spn_inputs'> 
<input type="file" name="myfile[]" id="fileChooser" style="float:right;" ><a href="javascript:void(0);"  onclick="$('#fileChooser').val('')" style="float:left;">Clear</a><br>
 </span>

JavaScript

$(function() {
    		var no_of_file = 0;
			
			if (no_of_file >= '5'){
				$("#dv1").hide();
				$("#imageLabel").hide();
			}else{				
				/* Append More Input Files */
				$('#anc_add_more').click(function() {
					no_of_file++;
				
					// alert(no_of_file);
					if(no_of_file < 5)
					{
    				$('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      
					  
					}
					else{ 
						alert("You can upload only 5 images");
					}
				}); 

			   $(document).on('click', '#remove-file,.anc_delete_more', function() { 
				   no_of_file--;
				});

			}
    	});