Only use one filter for each column

HFJ-1620

js/h5p-data-view.js

@@ -90,14 +90,7 @@ var H5PDataView = (function ($) {
         continue;
       }
 
-      var facets = self.facets[col];
+      url += '&facets[' + col + ']=' + self.facets[col].id;
-      for (var facet in facets) {
-        if (!facets.hasOwnProperty(facet)) {
-          continue;
-        }
-
-        url += '&facets[' + col + '][]=' + facet;
-      }
     }
 
     // Fire ajax request
@@ -235,29 +228,33 @@ var H5PDataView = (function ($) {
   H5PDataView.prototype.filterByFacet = function (col, id, text) {
     var self = this;
 
-    if (self.facets[col] === undefined) {
+    if (self.facets[col] !== undefined) {
-      self.facets[col] = {};
+      if (self.facets[col].id === id) {
+        return; // Don't use the same filter again
       }
 
-    // Only add if it isn't already added
+      // Remove current filter for this col
-    if (self.facets[col][id] === undefined) {
+      self.facets[col].$tag.remove();
-      self.facets[col][id] = text;
+    }
 
     // Add to UI
-      var $tag = $('<span/>', {
+    self.facets[col] = {
+      id: id,
+      '$tag': $('<span/>', {
         'class': 'h5p-facet-tag',
         text: text,
         appendTo: self.$facets,
-      });
+      })
+    };
 
     /**
-       * Callback for removing filter
+     * Callback for removing filter.
      *
      * @private
      */
     var remove = function () {
-        delete self.facets[col][id];
+      self.facets[col].$tag.remove();
-        $tag.remove();
+      delete self.facets[col];
       self.loadData();
     };
 
@@ -265,7 +262,7 @@ var H5PDataView = (function ($) {
     $('<span/>', {
       role: 'button',
       tabindex: 0,
-        appendTo: $tag,
+      appendTo: self.facets[col].$tag,
       text: self.l10n.remove,
       title: self.l10n.remove,
       on: {
@@ -280,7 +277,6 @@ var H5PDataView = (function ($) {
 
     // Load data with new filter
     self.loadData();
-    }
   };
 
   /**