JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Test</h1>
<span>
<input type="checkbox" name="chk['3']" value="1" id="chk['3']-1"/>
<label for="chk['3']-1">Checkbox Option</label>
    <div id="msg">initial load</div>
</span>

CSS

/* doesn't select anything, not escaped */
#chk['3']-1 {
   background-color: orange;
   padding: 20px;
}

/* works properly because it is escaped*/
#chk\[\'3\'\]\-1:before { 
  font-weight: bold;
  color: red;
  content: "GEE THIS WORKS FINE";
}

JavaScript

$('label').each(function() {
    $('#msg').text($(this).attr('for'));
    try {
        // dear dev, this is where the selector is escaped
        var ckBox = $("#"+$(this).attr('for').replace(/(\W)/g,"\\$1"));
        // or, alternatively use gEBId which doesn't need escaping
        // var ckBox = $(document.getElementById($(this).attr('for')));
        $('#msg').html("passed-" + ckBox[0].id);    
    } catch(ex) {
        $('#msg').html("failed-" + ex);    
    }
});