JSFiddle - React, Tailwind, and code Playground

by Aldrin Gauran

HTML

<div id="groupContainer">
    <div id ="profileGroup1">
        <div class="item">
            Number1: <input type="text" id="number_1" value="20">
        </div>
        <div class="item">
           Date1: <input type="text" id="date_1" value="1234">
        </div>
    </div>
    <div id ="profileGroup2">
        <div class="item">
            Number2: <input type="text" id="number_2" value="">
        </div>
        <div class="item">
            Date2: <input type="text" id="date_2" value="asdf1234">
        </div>
    </div>
</div>

JavaScript

$(function(){
    var len = $('#groupContainer > div').length;
 	var arr = [];
    for(var i=0; i < len; i++){

        var number = $('#number_' + [i + 1]);
        var date = $('#date_' + [i + 1]);
        var count = i + 1;
        var message ="";
        console.log(number)
  
        var a = number.map(function(){
            return this.value;
        });
        
        var b = date.map(function(){
            return this.value;
        });
        
        var newObj = {number: a[0], date: b[0]}
		arr.push(newObj);

    }
   
    var messages={};
    var message="";
    for(var c = 0; c < arr.length; c++)
    {        
        
        var groupMessage=false;
        for(var d in arr[c])
        {
            
            if(arr[c].hasOwnProperty(d))
            {      
                if(arr[c][d] == "")
                {
                    if(messages[d]==undefined) {
                    	messages[d]={groups:[]};
                    }
                    messages[d].groups.push(c+1);
                }
                
            }            
        }
        
        
    }
    
    var lastgroup=""
    
    for(i in messages){
    	m = messages[i];      
        var date = $('#date_' + i);
        console.log(date)
        if(m.groups.join(",")==lastgroup) {
        	message = message.replace("Group "+m.groups.join(",")+" ","Group "+m.groups.join(",")+":\n");
            if(m == "Date" && date.length != 8)
            { message += i + ' is invalid!\n';
            }
            message+=i+" is required!\n";
         
        }else {
        	message+="Group "+m.groups.join(",")+" "+i+" is required!\n";
        }
        lastgroup = m.groups.join(",");
    }
    if(message)
    {
    	alert(message);
    }
});