JSFiddle - React, Tailwind, and code Playground

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() {
if(fle_cnt < 5){
 
    event.preventDefault ? event.preventDefault() : event.returnValue = false;	
    $('#bkup_doc_rw').after('<tr><td>' + fle_cnt + '</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 remNew" style="text-decoration: none;cursor: pointer;" href="#">Remove</a></td></tr>');
       fle_cnt++;
    return false;
    }
});

$(document).on('click', '.remNew', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    $(this).closest('tr').remove();	
    return false;	
});