Add and build on classes based on data attribute values

Question

Users hover over pricing cards, ordered lowest to highest by price. When users hover over lowest priced plan, requisite feature cards for that plan get highlighted. When users hover over more expensive plans the basic feature cards get highlighted as well as the matching plan. Each plan and all the lesser plan's features get highlights.

I'm using data attributes of 1,2,3 for the hover card and the feature divs. So Basic plan gets data-tier="1", Standard gets dat-tier="2", etc. I can easily target matching data attributes, but I can't figure out how to target matching and lesser data attributes.

I've experimented with adding my feature cards to an array and then forEach through those and add a class of active to that. Here's what I have now.

$('.posting-card').hover(function () {
    // Grab the pricing tier denoted by data attribute. 
    var tier = $(this).data('tier');

    // Add class, active, to the card, I'm hovering over, and remove class active from any other cards. 
    $(this).addClass('active').siblings().removeClass('active');

    // Find feature cards that have a matching data attribute and add a class, active, to that as well. 
    $('.posting-price-feature[data-tier='  + tier + ']').addClass('active');

    // Find all other feature cards that have a data attribute value of less than what I'm hovering over now,
    // If it has a lesser price tier add class, active, to that feature card.


}, function () {
    $(this).removeClass('active'),
    $('.posting-price-feature').removeClass('active');
});

Answer 1

$('.posting-price-feature[data-tier]').filter(function () {
        return $(this).data('tier') <= tier;
    }).addClass('active');

jQuery selector for attributes with values greater than or less than an amount using > or <