JSFiddle - React, Tailwind, and code Playground

by Ganesh Salunkhe

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="{$contract_copy_text}" maxlength="50"/>
				    <label for="contract_copy_text" class="err"	id="err_lbl_contract_copy_text"></label>
				    <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="/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

function submit_add_contract_copy_form() {

		// Edited By Ganesh Salunkhe AIT-4078 30 July 2015
		var count = $(":input[id^='contract_copy_text']").length;//alert(count);
		for(var i=1;i<=count;i++){
		var contract_copy_text = $("input[id^='contract_copy_text']").val();//alert(contract_copy_text); // document.getElementById('contract_copy_text').value;
		var contract_copy_pdf = $("input[id^='contract_copy_pdf']").val();
		$( "input[id^='contract_copy_text'],input[id^='contract_copy_pdf']" ).each(function() {
			  var contract_copy_text = $( this ).val();//alert(contract_copy_text);
			  var contract_copy_pdf = $( this ).val();//alert(contract_copy_text);
			  if (contract_copy_text == "") {
					alert("insert contract copy title for file");
					$('#err_lbl_contract_copy_text').html('insert contract copy title for file');
					return false;
				}

				if (contract_copy_pdf == "") {
					alert("Please select contract copy pdf file for upload");
					$('#err_lbl_contract_copy_pdf').html('Please select contract copy pdf file for upload');
					return false;
				}
			});
		}
		var ext = $('#contract_copy_pdf').val().split('.').pop().toLowerCase();
		if ($.inArray(ext, [ 'pdf' ]) == -1) {
			alert('Sorry invalid extension!');
			$('#err_lbl_contract_copy_pdf').html('Sorry invalid extension!');
			return false;
		}
		$('#err_lbl_contract_copy_pdf').html('');
		$('#err_lbl_contract_copy_text').html('');
		return true;
	
	}



$(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
   ...