JSFiddle - React, Tailwind, and code Playground

by inDiscover

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="bkup_doc_rw">
            		<td align="right"><label class="letter_font" for="bkup_doc_proof">Document &nbsp;&nbsp;&nbsp;&nbsp;:</label></td>
            		<td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="file" name="bkup_doc_proof" id="bkup_doc_proof" required/>                   	&nbsp;&nbsp;&nbsp;<a class="letter_font" style="text-decoration:none;cursor:pointer;" href="#" id="addNew">Add more </a>
                    </td>
            	</tr> 
    </table>

JavaScript

var fle_cnt = 1;
$('#addNew').click(function() {
		fle_cnt++;
		event.preventDefault ? event.preventDefault() : event.returnValue = false;	
		$('#bkup_doc_rw').after('<tr><td>&nbsp;</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="file" name="bkup_doc_proof" id="bkup_doc_proof_'+fle_cnt+'" />&nbsp;&nbsp;&nbsp;&nbsp;<a class="letter_font" style="text-decoration: none;cursor: pointer;" href="#" id="remNew">Remove</a></td></tr>');
		return false;
	});
	
	$(document).on('click', '#remNew', function() {
		event.preventDefault ? event.preventDefault() : event.returnValue = false;
		$('#remNew').parents('tr').remove();	
		return false;	
	});