struts2 jquery table only displaying on first tab

Question

I have a div which contains 7 tabs. each table contains a link which will, when clicked, show a div which contains a table. This works on the first tab and displays the div fine. however when you go to any other tab the div does not display. I think it is a problem with the javascript and I was wondering if you could tell me is it possible in jquery to select a div on a unique tab?

action that is used to populate the table

<sj:tabbedpanel id="leadHomeAppTabs" cssClass="testing" useSelectedTabCookie="true">
    <s:iterator id="director" value="directorModel.directorList" status="directorStat">
        <s:set var="i" name="counter" value="#directorStat.count" />
        <s:url action="directorSummaryView.action" var="directorSummaryViewUrl">
            <s:param name="directorModel.directorListIndex" value="%{#directorStat.index}" />
        </s:url>

        <sj:div cssClass="test" label="%{#director.lineOfBusiness}" theme="simple" 
        labelposition="top" id="directorTab%{counter}" loadingText="Loading Line of Business Information..." 
        showLoadingText="true" href="%{directorSummaryViewUrl}" refreshOnShow="false3" preload="false" showErrorTransportText="false" />

        <sj:tab id="%{#director.lineOfBusiness}" target="directorTab%{counter}" label="%{#director.lineOfBusiness}"/>
    </s:iterator>
</sj:tabbedpanel>

Link to call the javascript to show the div

<sj:a href="#" onClick="javascript:showDivs('div2');">
    <s:property value="directorModel.directorScore.getCountAtLevel(2)"/>
</sj:a>

table I want to show ( will be called div2 on each tab which I think will cause a problem but the way the tabs are populated force it to act this way).

<sj:div id="div2" cssStyle="display:none">
    <table class="table table-striped platform-sum-table" >
        <thead>
            <th>Level</th>
            <th>Application Name</th>
            <th>ID</th>
            <th>Current Score</th>
            <th>Maximum Score</th>
        </thead>
        <tbody>
            <s:property escapeHtml="false" value="directorModel.directorScore.getAppListAtLevel(0)"></s:property>
        </tbody>
    </table>
</sj:div>

javascript

<script type="text/javascript">
    function showDivs(id) {
        $("#div2").toggle();}   
</script>

Answer 1

for future reference: the id's werent unique so I used OGNL to make it unique

<s:set id="dirName" value="directorModel.directorScore.directorName"/>
<sj:div id="%{dirName}div2" cssStyle="display:none">
    <table class="table table-striped platform-sum-table" >
        <thead>
            <th>Level</th>
            <th>Application Name</th>
            <th>ID</th>
            <th>Current Score</th>
            <th>Maximum Score</th>
        </thead>
    <tbody>
        <s:property escapeHtml="false" value="directorModel.directorScore.getAppListAtLevel(0)"></s:property>
    </tbody>
</table>
</sj:div>