https://www.midtowncomics.com/js/filter-chips.js

1var filterList = [];
2
3var filterChip_start = "<button class='filter-chip' type='button' ><label>";
4var filterChip_end   = "</label><i class='fas fa-times'></i></button>";
5
6$(document).ready(function () {
7    var chips = $(".filter-chips-container").children();
8    for(var i = 0; i < chips.length; i++){
9        filterList.push($(chips[i]).children()[0].innerHTML);
10    }
11});
12
13/**
14    Clicking a chip will remove it and uncheck it
15**/
16$(document).on('click', ".filter-chip", function(){
17    console.log($(this).children()[0].innerHTML);
18    removeFilterChip($(this).children()[0].innerHTML);
19    $('input[value="'+$(this).children()[0].innerHTML+'"]').prop('checked', false);
20    
21});
22
23function addFilterChip(filterName){
24    filterList.push(filterName);
25    var newChip = filterChip_start + filterName + filterChip_end;
26    $(".filter-chips-container").append(newChip);
27}
28
29function removeFilterChip(filterName){
30    var index = filterList.indexOf(filterName);
31    filterList.splice(index,1);
32    var chips = $(".filter-chips-container").children();
33    for(var i = 0; i < chips.length; i++){
34        if($(chips[i]).children()[0].innerHTML == filterName){
35            $(chips[i]).remove();
36            break;   
37        }
38    }
39}
40
41function resetFilterChips(){
42    $(".filter-chip").remove();
43    filterList = [];
44}
45
46$("#filter-form .checkbox input").click(function(){
47    if($(this).attr('checked') === "checked"){
48        addFilterChip($(this).val());
49    }else{
50        removeFilterChip($(this).val());
51    }
52})