Multiple dialog issue Please Advise

Multiple dialog issue Please Advise

I am a front end developer, getting accustomed to javascript.  Wondering if someone can help me understand what is happening here and why it isn't working.  I have consulted the other pages I have found, and still need guidance, please help me javascript gurus

Simple enough concept.  Works fine with only one dialog_link.  but once you add the second one, there is no activity(only testing in firefox at this point).

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Dialog           
                $('#dialog,#dialog2').dialog({
                    autoOpen: false,
                    width: 600,
                    height: 400,
                    buttons: {
                        /*"Ok": function() {
                            $(this).dialog("close");
                        }, */
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });
               
                // Dialog Link
                $('#dialog_link,#dialog_link2').click(function(){
                      var id = $(this).attr('id'); //dialog_link
                      id = id.replace('_link','') //dialog
                      $(id).dialog('open');
                      return false;
                });


                // Datepicker
                $('#datepicker').datepicker({
                    inline: true
                });
               
           
               
            });
        </script>
        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link { text-decoration: none;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
           
            /*Map Styles*/
            .map { background: url(images/mapBg.jpg) no-repeat; width: 402px; height: 504px; display: block; }
            .map ul.btnBox { position: relative; width: 402; height: 504; text-decoration: none; list-style: none; }
           
            .map ul.btnBox li.btn1 a { position: absolute; left: 55px; top: 115px; width: 35px; height: 38px; display: block; background: url(images/btn.png) no-repeat; text-decoration: none; }
            .map ul.btnBox li.btn1 a:hover { background: url(images/btnHover.png) no-repeat;}
           
            .map ul.btnBox li.btn2 a { position: absolute; left: 70px; top: 185px; width: 35px; height: 38px; display: block; background: url(images/btn.png) no-repeat; text-decoration: none; }
            .map ul.btnBox li.btn2 a:hover {background: url(images/btnHover.png) no-repeat;}

        </style>   
    </head>
    <body>
    <h1>Welcome to jQuery UI!</h1>
  
        <div class="map">
                <ul class="btnBox">
                    <li class="btn1"><a href="#" id="dialog_link">&nbsp;</a></li>
                    <li class="btn2"><a href="#" id="dialog_link2">&nbsp;</a></li>
                </ul>
            </div>
        <p></p>
               
        <!-- ui-dialog -->
        <div id="dialog" title="Wisconsin">
            <p>content a</p>
        </div>
       
        <div id="dialog2" title="Illinois"
            <p>content b</p>
        </div>
                  
           
        <!-- Datepicker -->
        <h2 class="demoHeaders">Datepicker</h2>
        <div id="datepicker"></div>
   
   

    </body>
</html>