JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/all.css">
<table class="table table-bordered table-striped dataTable" id="tbl-sizegrp-sizes">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Code</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" data-sizeid="1" class="chk-sizes"></td>
<td>1</td>
<td>011 </td>
<td>2011 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="2" class="chk-sizes"></td>
<td>2</td>
<td>03 </td>
<td>0/3 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="3" class="chk-sizes"></td>
<td>3</td>
<td>06 </td>
<td>0/6 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="4" class="chk-sizes"></td>
<td>4</td>
<td>1 </td>
<td>10cm </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="5" class="chk-sizes"></td>
<td>5</td>
<td>1 </td>
<td>1m </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="6" class="chk-sizes"></td>
<td>6</td>
<td>1 </td>
<td>23cm </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="7" class="chk-sizes"></td>
<td>7</td>
<td>10 </td>
<td>10 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="8"...
JavaScript
$("#tbl-sizegrp-sizes").dataTable;
var sizegrpSizesTable = $('#tbl-sizegrp-sizes').DataTable();
//iCheck for checkbox and radio inputs
$('input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris'
});