How to make multiple conditions inside filter datatable jQuery

I Work with datatable library, and i have issues. In my page i have filtering menu, which generate filtering values depends of table header values.

When page start, i filter data, show only active values, if user want to see inactive he can press:

And user will see all values, but in case if i goo to main filters:

And choose some values, and try to make all values active or inactive filtering is not working. How i can solve this issues?

My code for filtering:

function drawTable(table, className, lenth) {
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            return $(table.row(dataIndex).node()).find(className).length == lenth;
        }
    );
    table.draw();
}

$(document).ready(function () {
    var table = $('#' + tableId + '').DataTable();
    if ($(".fa").hasClass("fa-eye")) {
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
    }

    $(".fa-eye-slash").click(function () {
        $(".fa-visibles").removeClass('hide');
        $(".fa-invisibles").addClass('hide');
        $.fn.dataTable.ext.search.pop();
        table.draw();
    });

    $(".fa-eye").click(function () {
        $(".fa-visibles").addClass('hide');
        $(".fa-invisibles").removeClass('hide');
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
    });
});

JSFIDDLE

Whe u tap on filtering icon, chosee for example "Office -> Regional Director", on table 3 values, but showing only two, i want to cancel this filter and tap on eye, but this not work.

from How to make multiple conditions inside filter datatable jQuery