JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="white" class="white" value="white" />
<input type="checkbox" id="greymelange" class="greymelange" value="greymelange" />
<a href="#" class="filter-btn">filter</a>

JavaScript

var productIds = [];

$(document).on('click', 'a.filter-btn', function (e) {
    $(".listingTemplate").html("");
    if ($('input.white').is(':checked')) {
        var dArray = ["4021401143741", "4021402266227"];
        $.each(dArray, function (i, j) {
            if ($.inArray(j, productIds) == -1) {
                console.log(j)
                productIds.push(j);
            }
        })
    }

        if ($('input.greymelange').is(':checked')) {
            var deArray = ["4021401143741", "4021402266227", "4021402266418", "4021401143796"];
            $.each(deArray, function (i, j) {
                if ($.inArray(j, productIds) == -1) {
                    productIds.push(j);
                }
            })
        }
            console.log(productIds)
        });