Woocommerce – product with multiple variations, trouble making jQuery filtering

Hello, We have a product with multiple variations, and having trouble making jquery code filtering the options based on the selection.

Product variation attributes are Towel type (3), Scent (3), Quantity (9)
And each towel type only have certain scents and quantities available, so with this jquery code below we are trying to hide options that are not available for this towel type. (like certain scent and quantities, on specific towel type.)

The code works well in JSfiddle, and also triggers properly in production WooCommerce platform, but just simply does not hide the options as expected.
– We know there are potential issues with X-Browser, but as the code seems to work in JSfiddle, we are clueless why it isn’t working in production WooCommerce platform.

Any help and tips would be highly appreciated.

SW versions in use:
WordPress 4.9.1
Woocommerce 3.2.6
jQuery Updater 3.2.1

The page with variations:
https://readycares.ca/product/cold-hot-towels/

jQuery(document).ready(function( $ ){
$(‘#pa_towel-type’).change(function () {
//alert( “User changed towel type.” );
if( $(‘#pa_towel-type’).val() == ‘synthetic-8×9-towel’)
{
//alert( “User changed towel type to s-8×9.” );

$(“#pa_scent option[value=’unscented’]”).hide(); // Why this does not work ?!?!
$(“#pa_scent option[value=’lavender-scented’]”).hide();
$(“#pa_scent option[value=’lemon-scented’]”).show();

//$(‘#pa_scent’).val(‘lemon-scented’); // This works!
//$(‘#pa_scent’).hide(); // This works!

$(‘#pa_quantity option[value=”50″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”100″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”200″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”400″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”500″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”1000″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”1200″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”1500″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”2400″]’).css(‘display’,’block’);
$(‘#pa_quantity’).val(”);
}
if( $(‘#pa_towel-type’).val() == ‘cotton-8×8’)
{
//alert( “User changed towel type to c-8×8.” );
$(‘#pa_scent option[value=”lavender-scented”]’).hide();
$(‘#pa_scent option[value=”unscented”]’).show();
$(‘#pa_scent option[value=”lemon-scented”]’).show();
$(‘#pa_scent’).val(”);

$(‘#pa_quantity option[value=”50″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”100″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”200″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”400″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”500″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”1000″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”1200″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”1500″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”2400″]’).css(‘display’,’block’);
$(‘#pa_quantity’).val(”);
}
if( $(‘#pa_towel-type’).val() == ‘cotton-9×9’)
{
//alert( “User changed towel type to c-9×9.” );
$(‘#pa_scent option[value=”lavender-scented”]’).show();
$(‘#pa_scent option[value=”unscented”]’).hide();
$(‘#pa_scent option[value=”lemon-scented”]’).show();
$(‘#pa_scent’).val(”);

$(‘#pa_quantity option[value=”50″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”100″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”200″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”400″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”500″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”1000″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”1200″]’).css(‘display’,’block’);
$(‘#pa_quantity option[value=”1500″]’).css(‘display’,’none’);
$(‘#pa_quantity option[value=”2400″]’).css(‘display’,’block’);
$(‘#pa_quantity’).val(”);
}
}).trigger(‘change’);
});

The page I need help with: [log in to see the link]