Isotope combination filter display, I want to split the text array into divs

问题

I have a page using isotope filter plugin. The filter is triggered by checkbox. The filtering works, and the filter count works. I want to print what filter is applied and also be able to "uncheck" the filter checkbox if I click the printed filter value. The $filterdisplay is working, but its a string seperated by commas. I want to split the string into clickable divs that would unfilter the filter selected.

I tried splitting the array into divs but it caused the printed value to fire more than once. If c0 is checked and then after c1 is checked it would show:

<div>c0</div><div>c0</div><div>c1</div>

This example is pretty close to what I want except its not using checkboxes: http://everyonelovessharing.com/misc/isotopedemo/

  $(function(){
  var $container = $('#grid'),
      $checkboxes = $('#filters input');     
var $filterCount = $('.filter-count');
var iso = $container.data('isotope');      
 var $filterDisplay = $('#filter-display'); 

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value);
    });


    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
    updateFilterCount();

// this made the checkboxes show up multiple times in the display
//   filters.split(', ').map(function(opt) {
//  $("<div>").text(opt).appendTo( $filterDisplay );
//  });      


    $filterDisplay.text( filters );
  });

    function updateFilterCount() {
  $filterCount.text( iso.filteredItems.length + ' webinars match selected filters.' );
    }

    updateFilterCount();   

    //Reset btn
    $(".filter-reset").click(function () {
        $container.isotope({
            filter: '*'
        });
        updateFilterCount();
        $('#filters input:checkbox').prop('checked', false);
        $filterDisplay.text( '' );
        filters = {};
      console.log(filters);
    });  




     });   
</script>

来源：https://stackoverflow.com/questions/55943895/isotope-combination-filter-display-i-want-to-split-the-text-array-into-divs