I have successfully integrated multiple scripts to enable table sorting, filtering, and searching functionality. However, I am facing an issue where only the first search box for '2016' data is functional. I am seeking assistance in making all search boxes independent of each other and ensuring that they all work properly.
To address this problem temporarily, I have assigned individual names to tables/inputs/scripts as a workaround. However, this solution is not sustainable for future use. The sorting and filtering features are functioning well without any issues. Additionally, I would like to have the buttons at their default view rather than displaying all the data initially.
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}