Hi all,
I have a requirement where I have create a table that has dynamic fields, where only some are shown based on certain conditions.
I have to bind the data of the table I'll have to a subform because of the way the client wants the data to be displayed.

Above, the data is binded to a subform.
The problem lies in that, the header above the data should repeat in each page, meaning it was to be in the master page.
Since the columns are going to be dynamicly shown based on the type of document, I'll have to hide some fields.
Here is the weird part. I went through this artice: https://sapyard.com/interactive-adobe-part-18-how-to-hide-a-table-column-dynamically-using-javascript/,
and I actually succeeded in hiding the columns, but only when the header was in the body not the master page. when I moved the header to the master page, the JavaScript code stopped working.
I created an example to simplify what I mean.


In the images above, one table is in the master page and the other is in body, and the code for both tables is the exact same. (this code basically changes the column width of the first column.
If you look below at the result when running the form, you'll realize that only the one in the body is being changed by the code, but the one in the master page is not.

Is there anyway around this problem?
I hope the questions was clear.