JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow: hidden; width: 65%; float: left; padding: 0 0 0 3%; -webkit-box-shadow: inset 9px 0px 5px -5px rgba(0,0,0,0.1); -moz-box-shadow: inset 9px 0px 5px -5px rgba(0,0,0,0.1); box-shadow: inset 9px 0px 5px -5px rgba(0,0,0,0.1);">
	<div style="overflow: hidden; text-align: left; padding: 10px 0 10px 5px; color: #00539B;">Token 3:</div>
	<div style="overflow: hidden; width: 100%;">
		<div style="overflow: hidden; width: 47%; padding: 5px 1.5%; float: left; color: #000;">
			<input name="cbCMS1" type="checkbox" id="cbCMS1" class="cbCMS small1 cbCMS1">
			<span class="cb1" style="margin: 0 0 0 10px;">Checkbox 1</span>
		</div>
		<div style="overflow: hidden; width: 47%; padding: 5px 1.5%; float: left; color: #000;">
			<input name="cbCMS2" type="checkbox" id="cbCMS2" class="cbCMS small1 cbCMS1">
			<span class="cb2" style="margin: 0 0 0 10px;">Checkbox 2</span>
		</div>
	</div>
	<div style="overflow: hidden; width: 100%; margin: 0 0 10px 0;">
		<div style="overflow: hidden; width: 47%; padding: 5px 1.5%; float: left; color: #000;">
			<input name="cbCMS3" type="checkbox" id="cbCMS3" class="cbCMS small1 cbCMS1">
			<span class="cb3" style="margin: 0 0 0 10px;">Checkbox 3</span>
		</div>
		<div style="overflow: hidden; width: 47%; padding: 5px 1.5%; float: left; color: #000;">
			<input name="cbCMS4" type="checkbox" id="cbCMS4" class="cbCMS small1 cbCMS1">
			<span class="cb5" style="margin: 0 0 0 10px;">Checkbox 4</span>
		</div>
	</div>
</div>

JavaScript

$('input[type=checkbox]').change(function() {
var sList = "";
$('input[type=checkbox]').each(function () {
	if (this.checked) {
    var sThisVal = (this.checked ? $(this).parent().children("span").attr("class") : "");
    sList += (sList=="" ? sThisVal : "," + sThisVal);
    }
});
console.log (sList);
});