JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div class="ctrlHolder">
      <p generated="true" for="audienceName" class="errorField">This field is required.</p>
      <label for="subtopic"><em>*</em> Sub Topic</label>
      <select name="subtopic" id="subtopic" class="selectInput required">
            <option value="">Please choose a subtopic</option>
            <option value="1">(Administration) </option>                                    
            <option value="3">(Administration) </option>                                    
            <option value="4">(Templates) </option>
      </select>
        <p class="formHint"></p>
</div> 

<div class="ctrlHolder">
      <p generated="true" for="audienceName" class="errorField">This field is required.</p>
      <label for="subtopic"><em>*</em> Sub Topic</label>
      <select name="subtopic2" id="subtopic2" class="selectInput required">
            <option value="">Please choose a subtopic</option>
            <option value="1">(Administration) </option>                                    
            <option value="3">(Administration) </option>                                    
            <option value="4">(Templates) </option>
      </select>
        <p class="formHint"></p>
</div> 

<button id="button">ClicK</button>

CSS

.errorField {
    visibility:hidden
}

JavaScript

$('#button').click(function() {
    $(".ctrlHolder").each(function(){
        if($(".selectInput",this).val()==""){
            var isValid = false;
            $(this).addClass('error');
            $(".errorField",this).css("visibility","visible");
         }
         else {
            $('this').removeClass('error');
            $('.errorField',this).css("visibility","hidden");
         }        
    })
});