I need to filter the Area 1, Area 2, and Area 3 (columns 2, 3, and 4) in the “Area” dropdown, without displaying duplicates. Here is my table: https://www.berkshirecc.edu/_training/test/employee-directory-1.php.

I have tried removing the column 2 index and then adding another buildSelect, but the dropdowns disappear. I think my error is how I combined these two pieces of code. Any help will be greatly appreciated:

$(document).ready(function() {
    var table = $('#bcc-directory').DataTable({
    responsive: true,
    searching: true
});

buildSelect(table);

table.on('draw', function() {
buildSelect(table);
});
$('#clear-table').on('click', function() {
table.search('').columns().search('').draw();
});
});

buildSelect(table);

table.on('draw',
function() {
    buildSelect(table);
});
$('#clear-table').on('click',
function() {
    table.search('').columns().search('').draw();
});
});

function buildSelect(table) {
var counter = 0;
table.columns([1, 7]).every(function() {
    var column = table.column(this, {
        search: 'applied'
    });
    counter++;
    var select = $('<select aria-label="select"><option value=""></option></select>').appendTo($('#dropdown' + counter).empty()).on('change',
    function() {
        var val = $.fn.dataTable.util.escapeRegex($(this).val());

        column.search(val ? '^' + val + '$': '', true, false).draw();
    });

    column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d.substr(0, 25) + '</option>');
    });

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
        // Use RegEx to find the selected value from the unique values of the column.
        // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
        select.val(column.data().unique().toArray().find((e) = >e.match(new RegExp(currSearch))));
    }
});

}

function buildAreaSelect(table) {

    // Create select element
    var select = $('<select aria-label="select"><option value=""></option>      </select>').appendTo($('#dropdown' + counter).empty()).on('change',
    function() {
        var val = $.fn.dataTable.util.escapeRegex($(this).val());

        // Search Area columns for selected Area
        table.columns(2, 3, 4).search(val ? '^' + val + '$': '', true, false).draw();
    });

    // Build single list of options from the Area columns
    table.columns([2, 3, 4], {
        search: 'applied'
    })..data().flatten().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d.substr(0, 25) + '</option>');
    });

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
        // Use RegEx to find the selected value from the unique values of the column.
        // This will use the Regular Expression returned from column.search to find the  first matching item in column.data().unique
        select.val(table.columns([2, 3, 4], {
            search: 'applied'
        })..data().flatten()..unique().toArray().find((e) = >e.match(new   RegExp(currSearch))));
    }
});
}