JQuery filter based on radio input type – issue when nested within drop down

I have a number of filters which update a list of cards on a page.

As the filter options have grown, I have now moved these into a drop down list for better UX. I am now running into an issue where the data (cards) no longer recognises the filters selected, and will not filter as a result. The filter data target remains the same. For example, when selecting "closed" only the data with status-closed should display.

$(document).ready(function() {

    // Existing - Display cards based on filter select:
    $('.filter-data').on('change', 'input[type=radio]', function() {
        var filtername = $(this).attr('name');
        var filtervalue = $(this).val();
        $('.cards').attr('data-' + filtername + '-match', filtervalue);
        $('.cards').attr('data-visible-count', $('.cards .card:visible').length);
    });

    // NEW - Change the button text & add active class:
    $('.input-select').change(function() {
        var dropdown = $(this).closest('.dropdown');
        var thislabel = $(this).closest('label');

        dropdown.find('label').removeClass('active');
        if ($(this).is(':checked')) {
            thislabel.addClass('active');
            dropdown.find('ins').html(thislabel.text());
        }
    });

    // New - Add tabindex on labels:
    $('label.dropdown-item').each(function(index, value) {
        $(this).attr('tabindex', 0);
        $(this).find('input').attr('tabindex', -1);
    });

    // New - Add keyboard navigation:
    $('label.dropdown-item').keypress(function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 13) {
            $(this).trigger('click');
        }
    });
});

Drop down filter structure:

<div class="dropdown">
    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"> <ins>Filter</ins> </button>
    <div class="dropdown-menu radio filter-data">
        <label class="dropdown-item" for="status_all">
            <input type="radio" class="input-select" value="all" name="status" id="status_all">
            <div>All</div>
        </label>
        <label class="dropdown-item" for="open">
            <input type="radio" class="input-select" value="open" name="status" id="status_open">
            <div>Open</div>
        </label>
        <label class="dropdown-item" for="closed">
            <input type="radio" class="input-select" value="closed" name="status" id="status_closed">
            <div>Closed</div>
        </label>
    </div>
</div>

With a simplified version of the card layout – which I am trying to apply the filters to:

<div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="open">
    <div class="card">
        <div>Testing content</div>
    </div>
</div>
<div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="closed">
    <div class="card">
        <div>Testing content</div>
    </div>
</div>

With the filter-data class, the use of ‘this’ in the jQuery being used in the correct context? Or does this now target incorrectly?