JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<div class="error--required hide">not visible</div>
<div class="error--required">visible</div>
<div class="error--required hide">not visible</div>
<div class="error--required">visible</div>
<div class="error--required hide">not visible</div>
<div class="error--required">visible</div>
<div class="error--required hide">not visible</div>
<div class="error--required">visible</div>
<div class="error--required hide">not visible</div>
<div class="error--required">visible</div>

CSS

.hide {
  display: none;
}

.highlight {
  background: #f00;
}

JavaScript

$('.error--required:visible').first().addClass('highlight');