JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' placeholder='Search' class='text'><br>
    <span class="checkbox-wrapper" id="a"><input type='checkbox' id='a'>A<br></span>
    <span class="checkbox-wrapper" id="b"><input type='checkbox' id='b'>B<br></span>
    <span class="checkbox-wrapper" id="c"><input type='checkbox' id='c'>C<br></span>
    <span class="checkbox-wrapper" id="d"><input type='checkbox' id='d'>D<br></span>

JavaScript

document.getElementsByClassName('text')[0].addEventListener ("keyup", function onKeyUpClosure(ev) {
    var checkboxWrappers = document.getElementsByClassName('checkbox-wrapper');
    
    Array.prototype.forEach.call(checkboxWrappers, function(element) {
        var id = element.getAttribute('id');
        
        if (id.toLowerCase().indexOf(ev.target.value.toLowerCase()) > -1) {
            element.style.display = 'block';
        } else {
            element.style.display = 'none';
        }
    }); 
});