fixed filter bug

public/userarea/statkpi/statkpi.php

@@ -32,6 +32,21 @@ include('parsedatachart.php');
 
 
     <style>
+
+        #activeFilters{ 
+            display: flex;
+            font-size: 16px;
+            flex-direction: row;
+            background: 0;
+        } 
+        
+
+        .badge{ 
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 5px;
+        }
         .width-100 {
             width: 100%;
         }
@@ -395,13 +410,29 @@ include('parsedatachart.php');
                                     }
                                 })
 
-                                $('#activeFilters').html(activeFilters.map(f => `<span class="badge badge-info mr-1">${f} <button class="close" onclick="removeFilter('${f}')">&times;</button></span>`).join(''));
+                                $('#activeFilters').html(activeFilters.map(f => `<span class="badge badge-info mr-1">${f} <button class="close" onclick="removeFilter('${f}')">&times;</button></span>`).join('&nbsp&nbsp'));
+                                
                             }
                         });
 
-                        function removeFilter(filter) {
+                        function removeFilter(filter) { 
-                            const label = filter.split(':')[0];
+                            const label = filter.split(':')[0]; 
-                            $(`select:has(option:contains('${filter.split(': ')[1]}'))`).val(null).trigger('change');
+                            const select = $('label').filter(function() {
+                                return $(this).text().trim() === label;
+                            }).next('select');  
+
+                            const dateInput = $('label').filter(function(){
+                                return $(this).text().trim() === label;
+                            }).next('input')
+
+                            // Clear the select2 field
+                            if (select.length) {
+                                select.val(null).trigger('change');
+                            }
+                            // Clear the date field
+                            if(dateInput.length){
+                                dateInput.val(null).trigger('change');
+                            }
                         }
                         </script>