JSFiddle - React, Tailwind, and code Playground
HTML
<table id="ProjectTable">
<tr><td>
<select id="selected1" selectedIndex=0>
<option></option>
<option>o1</option>
<option>o2</option>
<option>o3</option>
<option>o4</option>
</select>
</td>
<td>
<select id="selected2" selectedIndex=0>
<option></option>
<option>10</option>
<option>12</option>
<option>13</option>
<option>14</option>
</select>
</td></tr></table>
<button type="button">Submit</button>
CSS
.error{
border: 1px solid red;
}
JavaScript
function checkEmptySelect() {
return $('select').filter(function() {
return !this.value.trim();
});
}
$('select[id^=selected]').on('change', function() {
var unselect = checkEmptySelect()
if (unselect.length) {
unselect.addClass('error')
} else {
$('select[id^=selected]').removeClass('error');
}
})