JSFiddle - React, Tailwind, and code Playground

HTML

<div class="field_wrapper">
			    <div>
				    <strong><font color='#ff0000'>* </font>Upload New Contract Copy :</strong>
				    <input type="text" name="contract_copy_text[]" id = "contract_copy_text[]" value="" maxlength="50"/>
				    <strong><font color='#ff0000'>* </font>Upload New Contract Copy :</strong>
					<input type="file" name="contract_copy_pdf[]" id="contract_copy_pdf[]" accept="application/pdf" />&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="add_button" title="Add field"><img src="http://alpha.allintravel.com/images/plus_img.jpg"/></a>
					<label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label>
			    </div>
			</div>

<div style = "width:800px;margin:0 auto;margin-top:20px;">
				<input type="submit" id="submit_button" value="Save" name="save_button" onclick="return submit_add_contract_copy_form();" /> 
				<span id='loading' style='display: none'><img src='images/loading.gif' alt=""></span>
			</div>

JavaScript

$(document).ready(function () {
    
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    // var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="/images/minus_img.jpg"/></a></div>'; //New input field html
    var fieldHTML = $('.field_wrapper1').html();
    var x = 1; //Initial field counter is 1
    $('.add_button').click(function () { //Once add button is clicked
        alert('hey');
        if (x < maxField) { //Check maximum number of input fields
            x++; //Increment field counter            
            $('.field_wrapper').append('<div class="field_wrapper1" style = "margin:20px;"><div><strong><font color="#ff0000">* </font>*Upload New Contract Copy :</strong><input type="text" id = "contract_copy_text[]" name="contract_copy_text[]" value="" maxlength="50"/><strong><font color="#ff0000">* </font>Upload New Contract Copy :</strong><input type="file" name="contract_copy_pdf[]" id="contract_copy_pdf[]" accept="application/pdf" /><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="http://alpha.allintravel.com/images/minus_img.jpg"/></a><label for="contract_copy_pdf" class="err" id="err_lbl_contract_copy_pdf"></label></div></div>'); // Add field html
        }
    });
    $(wrapper).delegate('.remove_button', 'click', function (e) { //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

function submit_add_contract_copy_form() {

    var contract_copy_text = $('#contract_copy_text[]').val(); // document.getElementById('contract_copy_text').value;
    var contract_copy_pdf = $('#contract_copy_pdf[]').val(); // document.getElementById('contract_copy_pdf').value;

    if...