Wijmo Flexgrid Filter from JS Function

Question

I am working with the Wijmo FlexGrid in JavaScript and I'm trying to make quick filter buttons to apply a filter on a specific column when a button is clicked. I want other column filters to remain unaffected.

Here's the code I am currently using:

    $("#btnAvailable").click(function (event) {
        // Prevent the default action of the <a> tag (navigation)
        event.preventDefault();

        var flxStockGrid = wijmo.Control.getControl('#StockGrid');

        // Get the existing filter function
        var existingFilter = flxStockGrid.collectionView.filter;

        // Set the filter function on the grid's CollectionView
        flxStockGrid.collectionView.filter = function (item) {
            // If an existing filter is set, use it in addition to the new filter
            if (existingFilter) {
                return existingFilter(item) && item.StockStatus === 'AVAILABLE';
            } else {
                // If no existing filter is set, just use the new filter
                return item.StockStatus === 'AVAILABLE';
            }
        };

        // Refresh the collectionView to apply the filter
        flxStockGrid.collectionView.refresh();
    });

It is working fine but I am running into an issue if I use 2 buttons for the same column. For example if I make buttons for USA and India, once I click USA, it filters for USA but when I click on India, it will show blank table. What am I doing wrong?