Table filter in a flask app works fine on Chrome, FireFox, and IE but does not work on Safari

I have a table with a filter. The table only displays the table rows that matches the filter. In the javascript code, I have a filterInteraction() function that have a commonElements list and display the table rows if they are included in the commonElements list. In my html, when the user click, the filterInteraction() will be triggered. Here's part of my filterInteraction() function (the sensitive code is removed): "

function filterInteraction(){
    let searchList = searchResult();
    let checkboxList = checkboxResult();
    let commonElements = searchList.filter(element => checkboxList.includes(element));
    console.log("commonElements ==========", commonElements)

    var table, tr, i;
    table = document.getElementById("employeeTable");
    let rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

                            for (i = 0; i < rows.length; i++) {
                                let currentName = rows[i].getElementsByTagName("td")[0].textContent.trim();
                                if(commonElements.includes(currentName)){
                                    rows[i].style.visibility = "visible";
                                    // rows[i].removeAttribute("hidden");
                                    // rows[i].style.display = "";
                                }
                                else{
                                    rows[i].style.visibility = "hidden";
                                    // rows[i].setAttribute("hidden", true);
                                    // rows[i].style.display = "none";
                                }
                            }
                            countPart(commonElements.length);
                        }". 

In this function, I printed the commonElements list, and the list is always correct. However, for the display, it's switching between displaying nothing and displaying the correct rows. (When entering the Safari, the first click on the filter makes the table empty, but the second click displays the correct rows, the next click will make the table displays nothing again .... ). Even during the time that the table display nothing, the commonElements list printed in console is still correct, which means the function does have the correct table rows, but they are not displayed. I tried three different ways to display the table row: "rows[i].style.visibility = "visible"; rows[i].removeAttribute("hidden"); rows[i].style.display = "";". None of them could work without the bug I mentioned above. I tested my filter on Chrome, FireFox, and IE, and my filter works perfectly on them. Any possible way to solve the issue on Safari? Why it has the display bug like this in Safari? Really need help!!! Thanks