JSFiddle - React, Tailwind, and code Playground

by Michael Dibbets

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form method="post" id="milestone-form">
                 <div id="fields" style="width:100%;">
                     <input type="text" name="milestone[]" placeholder="Milestone">
                     <input type="text" name="deadline[]" placeholder="Deadline">
                     <input type="text" name="amount[]" placeholder="Amount">
                     <input type="text" name="p[]" value="1" style="display:none;">
                     <span class="add halflings-icon plus">+</span>
                 </div>  
                <input type="submit" name="save-ms" class="btn btn-primary save-ms" value="Create">
</form>

JavaScript

$(document).ready(function(){
$('#milestone-form').validate({ // initialize the plugin
	rules: {
		"milestone[]": {
			required: true,
			minlength: 3,
			},
		"deadline[]": {
			required: true,
			minlength: 3,
			},
		"amount[]": {
			required: true,
			minlength: 2,
			},
					
		},
		submitHandler: function(form) {
		  var data = $("#milestone-form").serialize();
			$.ajax({
				type:"POST",
				url:"#",
				data:data,
				success:function(data){ 
					if(!data){alert("Something went wrong")};
					$(document).off();
					},	
				});
		},
	});
    $.validator.prototype.checkForm = function () {
  	  	//overriden in a specific page
  	  	this.prepareForm();
  	  	// Scoped variable.
  	  	var that = this;
  	  	$(this.elements).each(function(index,elem) {
    	  	// Search only once. big speed improv
      	  	var seek = that.findByName(elem.name);
      	  	// undefined and 0 is false by default
      	  	if (seek.length && seek.length > 1) {
          	  	seek.each(function(index,duplicate) {
                    // Notice the use the reference that from the outerscope. 
                    // `that` int his case refers to the the validator object.
              	  	that.check(duplicate);
          	  	});
      	  	}
          	else {
              	that.check(seek);
          	}
  	  	  	});
  	  	};
    // Also put these kind of things into the $(document).ready() or in a !function(){...}(); scope.
    // That way you make sure your variables don't mix up with other scripts variables.
    var form= "<div id='fields'> <input type='text' name='milestone[]' placeholder='Milestone'> <input 	type='text' name='deadline[]' placeholder='Deadline'> <input type='text' name='amount[]' placeholder='Amount'> <input type='text' name='p[]' value='1' style='display:none;'> <span class='add halflings-icon plus'>+</span> <span class='remove halflings-icon minus'>-</span> </div>"

	$(document).on('click', ".add",...