JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="webapp_auth_login_validation">
   
<div class="row webapp_js_cu_email_container">
<div class="col-md-4 form-group">                                   
        <label>Email Address:  <span class="text-danger">*</span></label> <a href="javascript:void(0);" class="webapp_js_cu_email_new" > Add </a>
        <input type="text" name="email[]" class="form-control required emailValidate">                                                                
</div>
</div>           
<input type="submit">
</form>

JavaScript

var count = 1; 
      var validator = $(".webapp_auth_login_validation").validate({
        rules: {"email": "required"},
        messages: {"email[]": "Please enter you email"}
    });

	var callToEnhanceValidate=function(){
		$(".emailValidate").each(function(){
			$(this).rules('remove');
			$(this).rules('add', {
				required: true,
				email : true,
				minlength:2,
       	 messages: {
                required: "Please enter you email"
            },
			
       
    });
		})
	}
$('.webapp_js_cu_email_new').click(function(){
	count++;
 $('.webapp_js_cu_email_container').append('<div class="col-md-4 form-group"><label>Additional Email: <span class="text-danger">*</span></label><a href="javascript:void(0);" class="webapp_js_cu_email_remove" title="Remove field"> Remove </a><input type="text" name="email['+count+']" class="form-control required emailValidate"></div>');
callToEnhanceValidate();
});

$('.webapp_js_cu_email_container').on('click', '.webapp_js_cu_email_remove', function(e){
    e.preventDefault();
    $(this).parent('div').remove();
});