Multiple simplicity on one page - dynamically

I am working on an internal project and want to use simplemodal to display client information when you click on the table where all the clients are listed.

This, however, caused me some problems, and so now I ask you guys.

This is my code:

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><a href="#" id="osx{$customer.customerid}">{$customer.name}</a></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
        <!-- modal content -->
        <div class="modalhidden">
            <div id="osx-modal-content{$customer.customerid}">
                <div id="osx-modal-title">Customer no #{$customer.customerid}</div>
                <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data">
                    <h2>Hello! I'm Customer no. #{$customer.customerid}</h2>
                </div>
            </div>
        </div>
{/foreach}
</tbody>
</table>
Displaying {$total} records<br />

<script type="text/javascript">
function addModal(x)
{
    $("osx" + x).addEvent("click", function(){
          var SM = new SimpleModal();
              SM.show({
                "title":"Title",
                "contents": $("#osx-modal-content" + x).html()
              });
        });

}
</script>

As you may have noticed, I use smarty for templating, which works great.

In addition, one simple mode works fine, but I want several of them to have different content.

The question is, is this a good idea or should it be on a separate page?

Please tell me if there is not enough information here - this is my first post :-)

Regards, Frederik

EDIT

Now I have this code:

<table border="0" cellpadding="0" cellspacing="0" id="customertable" class="sortable">
<thead>
    <tr class="odd">
        <th>Navn</th>
        <th>Telefon</th>
        <th>Postnummer</th>
        <th>By</th>
    </tr>
</thead>
<tbody>
{foreach $results as $customer}
{strip}
   <tr class="{cycle values='even,odd'}">
      <td class="name" id='mousetracking' title={$customer.name}><a href="#" id="{$customer.customerid}">{$customer.name}</a></td>
      <td class="data">{$customer.phone}</td>
      <td class="data">{$customer.postcode}</td>
      <td class="data">{$customer.city}</td>
   </tr>
{/strip}
        <!-- modal content -->
        <!--<div class="modalhidden">-->
            <div id="modal_{$customer.customerid}">
                <div id="osx-modal-title_{$customer.customerid}">Customer no #{$customer.customerid}</div>
                <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data_{$customer.customerid}">
                    <h2>Hello! I'm Customer no. #{$customer.customerid}</h2>
                </div>
            </div>
        <!--</div>-->
{/foreach}
</tbody>
</table>
Displaying {$total} records<br />

Together with this JS code:

jQuery(function ($) {
    var OSX = {
        container: null,
        init: function () {
            $("a").click(function (e) {
                e.preventDefault(); 

                $('#modal_' + this.id).modal({
                    overlayId: 'osx-overlay',
                    containerId: 'osx-container',
                    closeHTML: null,
                    minHeight: 80,
                    opacity: 65, 
                    position: ['0',],
                    overlayClose: true,
                    onOpen: OSX.open,
                    onClose: OSX.close
                });
            });
        },
        open: function (d) {
            var self = this;
            self.container = d.container[0];
            d.overlay.fadeIn('slow', function () {
                $('#modal_' + this.id, self.container).show();
                var title = $('#osx-modal-title_' + this.id, self.container);
                title.show();
                d.container.slideDown('slow', function () {
                    setTimeout(function () {
                        var h = $('#osx-modal-data_' + this.id, self.container).height()
                            + title.height()
                            + 20; // padding
                        d.container.animate(
                            {height: h}, 
                            200,
                            function () {
                                $("div.close", self.container).show();
                                $('#osx-modal-data_' + this.id, self.container).show();
                            }
                        );
                    }, 300);
                });
            })
        },
        close: function (d) {
            var self = this; // this = SimpleModal object
            d.container.animate(
                {top:"-" + (d.container.height() + 20)},
                500,
                function () {
                    self.close(); // or $.modal.close();
                }
            );
        }
    };

    OSX.init();

});

and original jquery.simplemodal.js

, div, div .