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){
        (function(box) {
            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);
        })($(elements.pop()));
	}
}