JSFiddle - React, Tailwind, and code Playground

HTML

<form id="startform" class="starter-form" method="POST" action="">
                <div class="heading">
                    <h1>Signup</h1>
                </div>
  
            <div id="form1" class="wizard">
              
                
                    <input name="first_name" maxlength="30" placeholder="First Name" type="text" class="input-text signup required" id="id_first_name">
                    <input name="last_name" maxlength="30" placeholder="Last Name" type="text" class="input-text signup required" id="id_last_name">
                   
                  
                    <input id="id_firmbox" class="input-text firm-autocomplete" name="firmbox" value="" placeholder="Company" type="text" />
                    <input id="id_job_title" type="text" placeholder="Position" class="input-text" name="job_title">
                    <button data-next-id="form2" validationDiv="form1" type="submit" class="continue button button-action form-button">Done</button>
                    <p id="error">Please fill in your</p>
                 
            </div>
            </form>

CSS

p#error{
	text-align: center;
	color: #650B0C;
	padding: 5px;
	background: #C02126;
	background: -moz-linear-gradient(top, rgba(192, 33, 38, 1) 0%, rgba(161, 24, 29, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192, 33, 38, 1)), color-stop(100%,rgba(161, 24, 29, 1)));
	background: -webkit-linear-gradient(top, rgba(192, 33, 38, 1) 0%,rgba(161, 24, 29, 1) 100%);
	background: -o-linear-gradient(top, rgba(192, 33, 38, 1) 0%,rgba(161, 24, 29, 1) 100%);
	background: -ms-linear-gradient(top, rgba(192, 33, 38, 1) 0%,rgba(161, 24, 29, 1) 100%);
	background: linear-gradient(to bottom, rgba(192, 33, 38, 1) 0%,rgba(161, 24, 29, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c02126', endColorstr='#a1181d',GradientType=0 );
	border-radius: 5px;
	border: 1px solid #720405;
	border-top: 1px solid #CF4046;
	font-weight: bold;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.22);
	display: none;
}
.tobefixed{
	background-color: #BA4445;
	color: white;
	border: 2px solid #A1181D;
}

JavaScript

required = ["id_first_name", "id_last_name", "id_firmbox", "id_job_title"];

errornotice = $("#error");
emptyerror = "Please fill out this field.";

$("#startform").submit(function(){
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("tobefixed");        
            errornotice.fadeIn(750);
            
            
            // =====Here===== //
            if (input.attr('placeholder').indexOf($('#error')) >= 0){
            } else{
                $('#error').append(input.attr('placeholder').toLowerCase() + ', ');
            }
            // ============== //
            
            
            
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("tobefixed");
        }
    }
           
    if ($(":input").hasClass("tobefixed")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});
$(":input").focus(function(){
     if ($(this).hasClass("tobefixed") ) {
         $(this).val("");
         $(this).removeClass("tobefixed");
     }
});