JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<table id="typeCheckBoxList"> 
  <tr> 
    <td>
      <span data-value="0">
        <input id="typeCheckBoxList_0" type="checkbox" name="H$M$typeCheckBoxList$0" />
        <label for="typeCheckBoxList_0">Student</label>
      </span>
    </td>
    <td>
      <span data-value="1">
        <input id="typeCheckBoxList_1" type="checkbox" name="H$M$typeCheckBoxList$1" />
        <label for="typeCheckBoxList_1">Parent</label>
      </span>
    </td>
    <td>
      <span data-value="2">
        <input id="typeCheckBoxList_2" type="checkbox" name="H$M$typeCheckBoxList$2" />
        <label for="typeCheckBoxList_2">Educational</label>
      </span>
    </td>
    <td>
      <span data-value="3">
        <input id="typeCheckBoxList_3" type="checkbox" name="H$M$typeCheckBoxList$3" />
        <label for="typeCheckBoxList_3">Specialist </label>
      </span>
    </td>
    <td>
      <span data-value="5">
        <input id="typeCheckBoxList_4" type="checkbox" name="H$M$typeCheckBoxList$4" />
        <label for="typeCheckBoxList_4">Other</label>
      </span>
    </td> 
  </tr> 
</table>
<button>Test</button>

CSS

td { padding: 10px; }
label { padding-left: 5px; }

JavaScript

$("button").click(function() { 
    $('#typeCheckBoxList input:checked').each(function() {
                alert($(this).closest('span').attr('data-value'));
                alert($(this).next('label').text());
    });
});