[jQuery] jQuery Magnifier for multiple divs

My apologies if this is posted twice.
I'm having some problems using the magnifier ui. Everything seems to
work for one div of images however if I add another div of images the
script does not work as expected. For the second div the image zooms
in when the mouse is not even close to the image. I have posted the
sample code below
and a link to the sample http://www.kikesweb.com/pos/magnifiertest.html
http://www.kikesweb.com/pos/magnifiertest.html
<html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.dimensions.js"></script
    <script type="text/javascript" src="ui.mouse.js"></script>
    <script type="text/javascript" src="ui.magnifier.js"></script>
    </head>
    <script type="text/javascript">
/*Magnifier*/
jQuery(document).ready(function(){
    $("#example").magnifier({
        overlap:true,
        magnification:2,
        zindex:'3',
        opacity:{min:'0.6', max:'1'},
        distance:'20',
        baseline:0,
    });
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
        $("#secondary").magnifier({
        overlap:true,
        magnification:2,
        zindex:'3',
        opacity:{min:'0.6', max:'1'},
        distance:'20',
        baseline:0,
    });
});
</script>
<body>
<div class="playground">
    <div id="example">
             images/mustang.jpg
             images/camaro.jpg
             images/plants.jpg
    </div>
</div>

<BR>
<div class="playground">
    <div id="secondary" class="ui-wrapper example" style="width:
150px;padding:
20px; height: 150px;">
             images/mustang.jpg
             images/camaro.jpg
             images/plants.jpg
    </div>
</div>
</body>
</html
-Enrique-