Use javascript function in th:if for filtering some table entities

I want to hide the table rows that do not satisfy a date condition written in javascript function.

the th:onclick attribute is working fine and returns me the correct comparison. But when I run the same in th:if the function is not called!

the syntax for the function call:

case 1: the function is called and returns me the true or false

<tr th:each="patient : ${patients}"  th:onclick="compareDates([[${patient.dateConverter()}]])">

case 2 that I want to use for the table row filtering: the function is not called:

<tr th:each="patient : ${patients}"  th:if="compareDates([[${patient.dateConverter()}]])">

the js function is as follows:

<script th:inline="javascript">
/*<![CDATA[*/
    
     function compareDates(date) {
     
    var date1= document.getElementById("appDate").valueAsDate.toLocaleDateString();

    return date == date1;
}
/*]]>*/
</script>

I tried to use th:hidden attribute as well I am getting the following error:

Caused by: org.attoparser.ParseException: Could not parse as expression: "compareDates([[${patient.dateConverter()}]])" (template: "index" - line 277, col 50)
    at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
    at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
    at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
    ... 121 more