JS: несколько фильтров выбора, изменение одного фильтра игнорирует значение, выбранное в другом выборе

Question

У нас есть сайт Wordpress со страницей, где перечислены все доступные документы.Мне пришлось добавить в эту таблицу два выпадающих / выбранных фильтра, один для фильтрации по типу документа (юридическая документация, административная документация и т. Д.) И различные типы продуктов, к которым относится документ.Таблица выглядит примерно так:

<?php if ( have_posts() ) : ?>
    <div id="js-document-list">
        <table>
            <thead>
            <tr>
                <td>Product</td>
                <td>Document type</td>
            </tr>
            </thead>
            <div>
                <div>
                    <p>Filter on:</p>
                    <select name="product_filter" id="product_filter" class="js-product-filter search">
                        <option value="none">Product</option>
                        <option value="product1">Product 1</option>
                        <option value="product2">Product 2</option>
                        ...
                    </select>
                    <select name="document_type_filter" id="document_type_filter" class="js-document-filter search">
                        <option value="none">Document type</option>
                        <option value="document_type1">Document type 1</option>
                        <option value="document_type2">Document type 2</option>
                        ...
                    </select>
                </div>
            </div>
            <tbody class="list">
                <?php while ( have_posts() ) : the_post(); ?>
                <tr class="js-documents">
                    <td class="js-products">product1, product2, ...</td>
                    <td class="js-document-types">document_type1, document_type2, ...</td>
                </tr>
                <?php endwhile; ?>
            </tbody>
        </table>
    </div>
<?php endif; ?>

Я уже написал некоторый Javascript, который делает то, что должен (некоторые имена классов могут не совпадать с HTML, не обновилскрипт ниже);

jQuery(document).ready(function ($) {
    var filterRows = function(condition, row) {
        if (condition) {
            row.show();
        } else {
            row.hide();
        }
    };

    $('.js-document_filter').change(function() {
        var productFilterValue = $('#product_filter option:selected').val();
        var documentTypeFilterValue = $('#document_type_filter option:selected').val();

        var productFilterSelected = productFilterValue !== 'none';
        var documentFilterSelected = documentTypeFilterValue !== 'none';

        var tableRow = $('.js-documents');
        tableRow.each(function () {
            var documentType = $(this).find('.js-document_types').html();
            var products = $(this).find('.js-products').html();

            if (!productFilterSelected && !documentFilterSelected) {
                $(this).show();
            } else if (productFilterSelected && !documentFilterSelected) {
                filterRows(products.indexOf(productFilterValue) > -1, $(this));
            } else if (!productFilterSelected && documentFilterSelected) {
                filterRows(documentType.indexOf(documentTypeFilterValue) > -1, $(this));
            } else {
                filterRows(products.indexOf(productFilterValue) > -1 && documentType.indexOf(documentTypeFilterValue) > -1, $(this));
            }
        });
    });
});

но теперь мне нужно изменить его так, чтобы скрипт фильтра таблиц мог использоваться для разных таблиц на сайте (хотя других таблиц нигде нет), так что всев скрипте должен быть динамическим.Я изменил его на модуль (хранится в src/js/modules/table-filter.js и импортируется в файл app.js в src/js;

import tableFilter from './modules/table-filter';

document.addEventListener('DOMContentLoaded', () => {
    tableFilter({
        selectDropdown: '#document_type_filter',
        tableRow: '.js-documents',
        tableData: '.js-document-types'
    });

    tableFilter({
        selectDropdown: '#product_filter',
        tableRow: '.js-documents',
        tableData: '.js-products'
    });
});

table-filter.js:

const $ = window.jQuery;

const proto = {
    init({ selectDropdown, tableRow, tableData }) {
        this.dropdown = document.querySelector(selectDropdown);
        this.row = $(tableRow);
        this.data = $(tableData);

        this.filter = this.filter.bind(this);

        this.dropdown.addEventListener('change', this.filter);

        return this;
    },
    filter() {
        const filterValue = this.dropdown.value;
        const data = this.data;

        const valueSelected = filterValue !== 'none';
        $(this.row).each(function() {
            let tableContent = $(this).find(data).html();
            tableContent = tableContent.replace('&', '&');

            if (!valueSelected) {
                $(this).show();
            } else if (tableContent.indexOf(filterValue) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
};

export default (spec) => Object.create(proto).init(spec);

Это работает в том смысле, что когда я изменяю значение в первом раскрывающемся списке, таблица фильтруется в соответствии с этим значением, однако, когда я затем выбираю значение во втором раскрывающемся списке, первое значение перезаписывается, и фильтрация происходит только в соответствии свторое значение. Есть ли способ, которым я могу фильтровать оба выбора одновременно?

PS. Я пытался использовать List.js, но я не мог получить значения элементов в функции List.js 'filter(), и дажеесли бы я это сделал, я бы делал то же самое, что и код выше.