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...