Add Serial Number for two tables with same id

Requirement : The page have more than 3 table depending upon the users selection. The user will select whether the table should have serial number or not.

Problems I used bootstrap table and need to add serial number for each table dynamically. Every table component have same id when im trying to add serial number by jQuery but getting serial number only in first table, the second table's serial number is missing.

<div class="container">
        <div class="row">
            <table id="producttable" class="table table-striped tabtable">
                <caption><strong>Note: </strong>Other solutions may be suitable depending on design-specific requirements.</caption>
                <thead>
                    <tr>
                        <th class="tabsort">Technology                       
                        </th>
                        <th class="tabsort">Product Series                       
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div>AC Fuse</div>
                        </td>
                        <td>                          
                            <div>
                                <a href="/powrgard-fuse-blocks/lft.aspx">LFT</a>, <a href="/products/fuse-blocks-fuseholders-and-fuse-accessories/dead-front-fuse-holders/lpsm.aspx">LPSM</a>
                            </div>
                        </td>
                    </tr>
                     <tr>
                        <td>
                            <div>AC Fuse</div>
                        </td>
                        <td>                          
                            <div>
                                <a href="/powrgard-fuse-blocks/lft.aspx">LFT</a>, <a href="/products/fuse-blocks-fuseholders-and-fuse-accessories/dead-front-fuse-holders/lpsm.aspx">LPSM</a>
                            </div>
                        </td>
                    </tr>
                     <tr>
                        <td>
                            <div>AC Fuse</div>
                        </td>
                        <td>                          
                            <div>
                                <a href="/powrgard-fuse-blocks/lft.aspx">LFT</a>, <a href="/products/fuse-blocks-fuseholders-and-fuse-accessories/dead-front-fuse-holders/lpsm.aspx">LPSM</a>
                            </div>
                        </td>
                    </tr>
               

               
                </tbody>
            </table>
        </div>

        <div class="row">
            <table id="producttable" class="table table-striped tabtable">
                <caption><strong>Note: </strong>Other solutions may be suitable depending on design-specific requirements.</caption>
                <thead>
                    <tr>
                        <th class="tabsort">Technology                       
                        </th>
                        <th class="tabsort">Product Series                       
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div>AC Fuse</div>
                        </td>
                        <td>                          
                            <div>
                                <a href="/powrgard-fuse-blocks/lft.aspx">LFT</a>, <a href="/dead-front-fuse-holders/lpsm.aspx">LPSM</a>
                            </div>
                        </td>
                    </tr>
                     <tr>
                        <td>
                            <div>AC Fuse</div>
                        </td>
                        <td>                          
                            <div>
                                <a href="/powrgard-fuse-blocks/lft.aspx">LFT</a>, <a href="/dead-front-fuse-holders/lpsm.aspx">LPSM</a>
                            </div>
                        </td>
                    </tr>
                     <tr>
                        <td>
                            <div>AC Fuse</div>
                        </td>
                        <td>                          
                            <div>
                                <a href="/powrgard-fuse-blocks/lft.aspx">LFT</a>, <a href="/dead-front-fuse-holders/lpsm.aspx">LPSM</a>
                            </div>
                        </td>
                    </tr>                         
                </tbody>
            </table>
        </div>
    </div>

$(document).ready(function () {   
            if(isSelection == true)
                addRowCount("#producttable");

            function addRowCount(n) {
                $(n).each(function () {
                    $("th:first-child, thead td:first-child", this).each(function () {
                        var n = $(this).prop("tagName");
                        $(this).before("<" + n + ' class="table-serial"><\/' + n + ">")
                    });
                    $("td:first-child", this).each(function (n) {
                        $(this).before('<td class="table-serial">' + (n + 1) + "<\/td>")
                    })
                })
            }
        });