JSFiddle - React, Tailwind, and code Playground

by Dinesh Patra

HTML

<div id="groupContainer">
    <div id ="profileGroup1">
        <div class="item">
            Name1: <input type="text" id="name_1" value="asdf">
        </div>
        <div class="item">
           Date1: <input type="text" id="date_1" value="01/50/48">
        </div>
    </div>
    <div id ="profileGroup2">
        <div class="item">
            Number2: <input type="text" id="name_2" value="">
        </div>
        <div class="item">
            Date2: <input type="text" id="date_2" value="">
        </div>
    </div>
</div>

JavaScript

$(function(){

			// Count number of groups we have.
        	var len = $('#groupContainer > div').length;
        	var data = [];
        	
        	// For each given group
        	for(var i=0; i < len; i++){

        		// Get the values
            	var number = $('#name_' + [i + 1]);
           	 	var date = $('#date_' + [i + 1]);
            	
            	var count = i + 1;
            
            	var a = number.map(function(){
                	return this.value;
            	});
            
            	var b = date.map(function(){
                	return this.value;
            	});

            	var newObj = {Name: a[0], Date: b[0]}
            	data.push(newObj);
        	}

        	var message = "";
        	var errorObj = {
            	group: new Array(),
            	msg: '',
            	hasError: false
        	};

        	var ErrInGroup = false;
        	
        	for(var i = 0; i < data.length; i++) {
            	haveErrorInGroup = false;
                
            	
            	for(var d in data[i])  {

               		if(data[i].hasOwnProperty(d)) {
                   
                    	message += [i + 1] + '\n';
                    	
                    
                    	if(data[i][d] == "" || data[i][d] == null){
                        	message += d + ' is required!\n';
                        	errorObj.msg += d + ' is required!\n';
                        	errorObj.hasError = true;

                        	if (errorObj.group.indexOf(i + 1) < 0) {
                        		errorObj.group.push(i + 1); 
                        	}
                    	}
                   
                    if(d == "Date" && !(data[i][d] == "" || data[i][d] == null))  {
                        if(data[i][d].length != 22 && data[i][d] != "") {
                            message += 'Invalid Date!\n';
                            
                        	errorObj.msg +=  'Invalid Date!\n';
                            errorObj.hasError =...