Checkbox not displaying content of all tables

I am trying to get a checkbox to display information within in a table, I have it so the checkbox is above each of the tables. When I press the first checkbox the information becomes unhidden and displays. However when I press the checkbox for each table underneath it will not display anything. This is the javascript that I am using:

<script language="javascript" type="text/javascript">
        function visible() {
            var lfckv = document.getElementById("row").checked;
            if (lfckv === true) {
        <c:forEach var="table" items="${table.rows}">
                document.getElementById('table2').style.display = 'contents';
        </c:forEach>

            } else {
        <c:forEach var="table" items="${table.rows}">
                document.getElementById('table2').style.display = 'none';
        </c:forEach>

            }
        }
    </script>

The checkbox is in a foreach statement and generates for however many tables there are. This is the checkbox code:

<input id="row" type="checkbox" onclick="visible()">Press for tables to display<br>

I have tried removing the foreach with the JavaScript however the same happens