How to give unique id to tables generated dynamically

I am trying to get use a checkbox to make tables visible and hidden I am able to do it when there is only one table however when more then one is generated then when the checkbox is pressed to make it visible it will make the first table visible no matter what checkbox is push. This is the script that I am using to try and give a unique number to and changes the tables to visible and hidden. And the checkbox code.

 <script language="javascript" type="text/javascript">
            ++i;
            function visible(elem, i) {

                document.getElementById(i).style.display = elem.checked ? 'contents' : 'none';
            }
        </script>
<input id="n" type="checkbox" onclick="visible(this, 'i');"> - Press to display

And this is how i have labeled my table

<table id="i">

I believe that the issue is that it is only doing the first one and there is no incrementation happening.