JSFiddle - React, Tailwind, and code Playground
HTML
List Favourite<br>
<table border=1>
<th rowspan=3>Name</th>
<tr>
<th colspan=3>Favourite Fruits</th>
<tr>
<th>Banana</th>
<th>Apple</th>
<th>Mangoes</th>
<tr>
<td>John<input type="hidden" id="U0001"/></td>
<td align="center">
<input type="checkbox" name="fruits[]" value="Banana"/>
</td>
<td align="center">
<input type="checkbox" name="fruits[]" value="Apple"/>
</td>
<td align="center">
<input type="checkbox" name="fruits[]" value="Mangoes"/>
</td>
<tr>
<td>Mark<input type="hidden" id="U0002"/></td>
<td align="center">
<input type="checkbox" name="fruits[]" value="Banana"/>
</td>
<td align="center">
<input type="checkbox" name="fruits[]" value="Apple"/>
</td>
<td align="center">
<input type="checkbox" name="fruits[]" value="Mangoes"/>
</td>
<tr>
<td colspan=4>
<input type="button" value="Submit" id="btnSubmit"/>
</td>
</table>