Remove items from dinamic array

I have some lists and checkboxes which work as filters, what I need to do is when you select a checkbox is to add that value to a small tag next to the title and when uncheck then remove that value.

I am making this work, saving each value into an array and when uncheck try to look for the index of that value and remove, but I think I have a conflict with the positions in the array. If you click one by one and then remove one by one then it works but if you click all of them and uncheck only the first one, it removes everything. Have a clue how to solve it but not sure how to proceed.

Any help please? http://ift.tt/2gR9Gy4

$(function() {
  $(".filter-nav > li").each(function(index) {
    var brands = [];
    $(this).find("input:checkbox").each(function(index) {
      $(this).on("click", function() {
        if ($(this).is(":checked")) {
          console.log("adding: " + index);
          brands.push($(this).val());
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        } else {
          console.log("removing:" + index);
          brands.splice(index);
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        }
      });
    });
  });
});