How to remove multiple classes from different div with jQuery

I’ve three dropdowns.. When i click on the div with the data-column=”1″ ( Momentum Jeans Shorts ), I want the current dropdown to remove the “active” & “disable” class for the data-column=”1″ (Momentum Shorts) and also add the “disable” & “active” class on the selected div which is the data-column=”1″ ( Momentum Jeans Shorts )..

On my second dropdown, I would want the data-column=”1″ (Momentum Shorts) to not have the “disable” & “active” class. data-column=”2″ ( Momentum Jeans Shorts ) would have the “disable” class.

I’ve tried to work on this many hours but I cant seems to get the algorithm right.. I’ve attached a screenshot of the dropdowns, and hopefully you get what I’m trying to achieve

$(function() {
            $(".compare-filter-item").on("click",function() {
                const column_value = $(this).attr("data-column");
                const selected_data_product = $(this).attr("data-product");

                $('.compare-filter-item[data-product="' + selected_data_product + '"][data-column="' + column_value + '"]').parent().parent().find(".active.disable").removeClass("active disable");


                $("[data-product='" + selected_data_product + "']").addClass("disable");
                $(this).addClass("active");

                const myarray = $(`.compare-all .compare-products [data-product="${selected_data_product}"]`).map(function() {
                return $(this).html();
                });

                $(`.compare-main .compare-products [data-column="${column_value}"]`)
                .each(function(i) { $(this).html(myarray[i]) });
            });
        });