Show/Hide HTML Block in Calendar Datapage based on Filter

[mmdouce]

In my application I want users to be able to edit fields  for events that are associated with the current calendar year, but not past years.  I am using a Calendar DataPage that displays the events based on the filtered Year and other variables. Each event has a link that routes to a webpage that displays the event's details.

I have two links, one that directs to an editable DataPage and the other to a non-editable DataPage.  I only want to show one link per event, which is dependent on the filtered calendar year. I followed the directions in the following forum post, but the link does not hide as expected on the filtered year: 

 Calculated field (CalcField) is:

CASE
WHEN [@field:Event_AY] = '2022-2023'
THEN 'show'
ELSE 'hide'
END

First HTML Block contains URL:

<a href="#" id="link-id-[@field:Event_Table_ID]" target="_blank">Details</a>

Second HTML Block contains script:

<script>
var link = document.getElementById("link-id-[@field:Event_Table_ID]");
var htmlBlock = link.parentElement;
var entry = htmlBlock.parentElement;
var calcFieldIndex = 4;
var calcField = entry.getElementsByClassName("cbResultSetData")[calcFieldIndex - 1];

if (calcField.value !== show)
{
    htmlBlock.style.display = "none";
}
</script>

I know the calculation is working, the show/hide link just isn't working. Any insights would be appreciated.

[mmdouce]

I am closing this question and moving it to General Questions Forum.