JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <p><span id="error">&nbsp</span>
    <p><input id="field1"></input></p>
    <p><input id="field2"></input></p>
    <p><input id="field3"></input></p>
    <p><input id="field4"></input></p>
    <button id="btn">Button</button>
        
</body>

JavaScript

$('#btn').click(function(){
    arrElem = [];
    arrMsg = [];
    
    arrMsg.push('Field 4');
	arrElem.push('#field4');
    arrMsg.push('Field 3');
	arrElem.push('#field3');
    arrMsg.push('Field 2');
	arrElem.push('#field2');
    arrMsg.push('Field 1');
	arrElem.push('#field1');
    multierror(arrElem, arrMsg);
});

function multierror(elements, messages){

	while(elements.length > 0){
		box = $(elements.pop());
		errTab = $('#error');
		errTab.fadeOut(10, function(){
			box.css('border', '1px solid red');
			errTab.html(messages.pop());
		}).fadeIn(10);
		errTab.fadeOut(5000, function(){
			box.css('border', '1px solid #cccccc');
			errTab.html('&nbsp');
		}).fadeIn(1000);
	}
}