JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filterTopSkills" class="no-margin-no-padding">
<li class="row input-group filter-group no-margin-no-padding"><label class="col-sm-12 col-xs-12 custom1-checkbox filter-label-props filter-pos col1-chkbox-dropdown" for="chk-filterTopSkills0"><input id="chk-filterTopSkills0" name="chk-filterTopSkills" autocomplete="off" type="checkbox" style="height:16px;width:16px;margin-top:2px;"><span class="custom1-checkbox-title col-sm-11 col-xs-11 pull-right no-padding">COMPUTER SCIENCE</span></label></li></ul>

JavaScript

$(document).ready(function () {

    $('#filterTopSkills label').on('click', function (event) {
        event.preventDefault();
        var $check = $(':checkbox', this);
        $check.prop('checked', !$check.prop('checked'));
        alert('clicked label');
    });


    $('#filterTopSkills :checkbox').on('click', function (event) {
        event.stopPropagation();
        alert('clicked checkbox');
    });
});