How to Hide Product Variants Based on Dependencies Using jQuery?

I am using WooCommerce with the Hello Elementor theme on localhost, and I have several custom fields for product variants. I want to hide a variant when specific dependency conditions are not met. I’m using the following jQuery code to check dependencies and toggle visibility:

$('#product-variants .variant-card').each(function () {
    const $variant = $(this);
    const dependencies = ($variant.data('dependencies') || '').split(',').filter(Boolean);
    const allDependenciesMet = dependencies.every(dependencyIndex => {
        const dependentVariant = $('[data-variant-index="' + dependencyIndex + '"]');
        const quantity = parseInt(dependentVariant.find('input[type="range"]').val(), 10) || 0;
        return quantity > 0; // Check if quantity is more than 0
    });

    if (!allDependenciesMet) {
        $variant.hide(); // Hide variant if dependencies are not met
    } else {
        $variant.show(); // Show variant if all dependencies are met
    }
});

The issue is that the variants hide correctly at first when the page loads, but then the display property quickly changes back to block almost immediately (less than a second), causing the variants to reappear.

I am not using any other plugins that might interfere with this logic only woocommerce is installed in my localhost.

• Why is the display property reverting to block?
• and how can I ensure that the variants remain hidden when their dependencies are not met?

Any insights or solutions would be greatly appreciated!