JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <input type="checkbox" id="brand" value="1">
        <label for="brand"><span></span>
            <?php echo $lang->getW('prop_type_1'); ?></label>
    </li>
    <li>
        <input type="checkbox" id="brand1" value="2">
        <label for="brand1"><span></span>
            <?php echo $lang->getW('prop_type_2'); ?></label>
    </li>
    <li>
        <input type="checkbox" id="brand2" value="3">
        <label for="brand2"><span></span>
            <?php echo $lang->getW('prop_type_3'); ?></label>
    </li>
    <li>
        <input type="checkbox" id="brand3" value="4" />
        <label for="brand3"><span></span>
            <?php echo $lang->getW('prop_type_4'); ?></label>
    </li>
    <li>
        <input type="checkbox" id="brand4" value="5">
        <label for="brand4"><span></span>
            <?php echo $lang->getW('prop_type_5'); ?></label>
    </li>
    <li>
        <input type="checkbox" id="brand5" value="6">
        <label for="brand5"><span></span>
            <?php echo $lang->getW('prop_type_6'); ?></label>
    </li>
</ul>

JavaScript

$('body').on('click', '.click, :checkbox, .pag_link', function () { // search, filters and change page buttons

        if ($('#res_prop').is(':checked')) {
            var use = $('#res_prop').val();
        } else if ($('#com_prop').is(':checked')) {
            var use = $('#com_prop').val();
        }

        if ($(this).is(':checkbox')) {

            $(this).prop('checked', true); // still not checking them

            if ($(this).attr('class') == 'filter1' || $('.filter1').is(':checked')) {
                var type = $(this).val(); // maybe should be an array
            } else var type = null;
            if ($(this).attr('class') == 'filter2' || $('.filter2').is(':checked')) {
                var status = $(this).val(); // maybe should be an array
            } else var status = null;
            if ($(this).attr('class') == 'filter3' || $('.filter3').is(':checked')) {
                var bhk = $(this).val(); // maybe should be an array
            } else var bhk = null;
        } else {
            var type = status = bhk = null;
        }

        if ($(this).is('.pag_link')) {
            if ($(this).text() == '«') var page = (parseInt($('.active').text()) - 1);
            else if ($(this).text() == '»') var page = (parseInt($('.active').text()) + 1);
            else var page = parseInt($(this).text());
        } else {
            var page = 1;
        }

        $.ajax({
            method: 'POST',
            url: '/search',
            data: {
                'do': 'abc',
                    'use': use,
                    'type': type,
                    'status': status,
                    'bhk': bhk,
                    'city': $('select[name="city"]').val(),
                    'zone': $('select[name="zone"]').val(),
                    'page': page
            }
        }).done(function (data) {
            if ($('#search').is(':visible')) $('#search').hide();

            if ($(this).is(':checkbox')) {
                var new_content =...