JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Number</th>
<th>Fruits</th>
</tr>
</thead>
<tbody>
<tr>
<td class="num">1</td>
<td>
<select class="fruits">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="num">2</td>
<td>
<select class="fruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="num">3</td>
<td>
<select class="fruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="num">4</td>
<td>
<select class="fruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</td>
</tr>
</tbody>
</table>
<button onclick= check()>
Submit
</button>
JavaScript
function check(){
var $fruits = [];
$("select.fruits").each(function() {
var $two = $(this).find("option:selected").text();
$fruits.push($two)
})
for ($i= 1; $i < $fruits.length; $i++) {
for ($j= 0; $j < 5; $j++) {
if ($fruits[$i] == "Apple" && $fruits[$i+$j] == "Banana") {
alert ("Since you have selected Apple, you cannot select Banana");
$("select.fruits").val("");
return false;
}
if ($fruits[$i] == "Banana" && $fruits[$i+$j] == "Apple") {
alert ("Since you have selected Banana, you cannot select Apple");
$("select.fruits").val("");
return false;
}
}
}
}