JSFiddle - React, Tailwind, and code Playground
by samonela
HTML
<table width="80%">
<tr><th>Select your Region</th><th colspan="3">Select your Country</th> <th></th>
</tr>
<tr>
<td width="20%" valign="Top" align="Left">
<form action="./action_page.php" method="POST">
<p>
<input type="checkbox" id="checkAll" onclick="ChooseALL()"> Region All / None<br><br>
<input type="checkbox" id="checkEMEA" class="checkEMEA" onclick="ChooseEMEA()"> EMEA<br>
<input type="checkbox" id="checkAPAC" onclick="ChooseAPAC()"> Asia Pacific<br>
<input type="checkbox" id="checkCALA" onclick="ChooseCALA()"> Canada & Latin America<br>
</p>
</td>
<td width="20%" valign="Top" align="Left">
<p id="textEMEA" style="display:none">
<input type="checkbox" id="checkAllEMEA" class="checkAllEMEA" onclick="ChooseALLEMEA()"> EMEA All / None<br><br>
<input type="checkbox" class="CouCheckEMEA" name="country[]" value="Azerbaijan" onclick="countrySelect(this.value)">Azerbaijan <br>
<input type="checkbox" class="CouCheckEMEA" name="country[]" value="Bahrain" onclick="countrySelect(this.value)">Bahrain <br>
<input type="checkbox" class="CouCheckEMEA" name="country[]" value="Belarus" onclick="countrySelect(this.value)">Belarus <br>
</p>
</td>
<td width="20%" valign="Top" align="Left">
<p id="textAPAC" style="display:none">
<input type="checkbox" id="checkAllAPAC" name="checkAllAPAC" onclick="ChooseALLAPAC()"> Asia Pacific All / None<br><br>
<?php if (($result = sqlsrv_query($conn, $APACsql)) !== false)
{
while ($obj = sqlsrv_fetch_object($result))
{
$Country = ($obj->Country);
echo '<input type="checkbox" class="CouCheckAPAC" name="country[]" value="'.$Country.'" onclick="countrySelect(this.value)">'.$Country.'<br>';
}
}
?>
</td>
<td width="20%" valign="Top" align="Left">
</p>
...