JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myFrm" name="myFmr" action="#" method="POST">
    <div class="SearchInputs ajaxPanel" id="contentType">
        <div>
            <label for="allContent">
                <input type="radio" name="typeFilter" value="allContent" class="contentFilter" id="allContent">
                All content types
            </label>
        </div>
        <div>
            <label for="thisContent">
                <input type="radio" name="typeFilter" value="thisContent" class="contentFilter" id="thisContent" disabled="">
                These content types
            </label> <!-- To get the indent we use a div inside a div. The div just above doesn't close until the end of this box -->
            <div>
                <label for="premium">
                    <input type="checkbox" name="premium" value="true" class="subFilter" id="premium">
                    Premium ICIS Services
                </label>
            </div>
            <div>
                <label for="video">
                    <input type="checkbox" name="video" value="true" class="subFilter" id="video">
                    Video
                </label>
            </div>
            <div>
                <label for="articles">
                    <input type="checkbox" name="articles" value="true" class="subFilter" id="articles">
                    Articles
                </label>
            </div>
            <div>
                <label for="other">
                    <input type="checkbox" name="other" value="true" class="subFilter" id="other">
                    Other results
                </label>
            </div><!-- This is the closing div for the initial label/input (see comment above) -->
        </div><!-- This closes SearchInputs -->
    </div>
</form>

JavaScript

(function($) {    

    // jQuery objects store
    var sFrm = {
        $form: $('#myFrm'),
        $searchAgain: $('#searchAgainSubmit'),
        $radioFilter: $('.contentFilter'),
        $allRadio: $('#allContent'),
        $specificRadio: $('#thisContent'),
        $enabledSubFilters: $('.subFilter:enabled'),
        $filtersWrap: $('#filters'),
        $boxes: $('#contentType').find('input:checkbox')
    }
    
    // set up defaults
    sFrm.$allRadio.attr({
        'disabled': false,
        'checked': true
    });    
    sFrm.$specificRadio.attr({
        'disabled': true,
        'checked': false
    });    
    sFrm.$enabledSubFilters.attr({
        'disabled': false,
        'checked': false        
    });

    // prevent form from submitting    
    $('#MainForm').submit(function(e){
        e.preventDefault();    
    });    
    
    // search on submit button
    $('#searchAgainSubmit').bind('click', function(e){
        e.preventDefault();
        searchAjax();
    });

    // search on pagination
    $('.RightBlock').delegate('.SearchPagination > a', 'click', function(e){
        e.preventDefault();
        searchAjax();    
    });

    // search on radio and checkboxes
    $('#contentType input:enabled').bind('click', function(e){
        var $this = $(this),
            $type = this.type,
            $id = this.id;    
        if ($type === 'radio') {
            if ($id === 'allContent'){
                sFrm.$boxes.attr({'checked': false});
                sFrm.$specificRadio.attr({'disabled': true});   
                searchAjax();
                removeFilter();
            }
        } else if ($type === 'checkbox') {
            if (sFrm.$boxes.filter(':checked').length === 0) {
                sFrm.$allRadio.trigger('click');        
            } else {
                var filterConfig = {
                    index: $('.subFilter').index($this),
                    txt: jQuery.trim($this.parent().text())
                }           ...