I am trying to load two modal dialog boxes with Jquery. Both of them load separate pages using ajax. The only problem is that only one of them works.

I think I need to simplify my code but am unsure how.

    <script type="text/javascript">
$(document).ready(function(){
var dialogOpts = {
      modal: true,
      bgiframe: true,
      autoOpen: false,
      height: 400,
      width: 550,
      draggable: true,
      resizeable: true,
      title: "Your campaign rates",
   };
$("#ratesbox").dialog(dialogOpts);   //end dialog

   $('#ratesbutton').click(
      function() {
         $("#ratesbox").load("rate_sheet/index.php", [], function(){
               $("#ratesbox").dialog("open");
            }
         );
         return false;
      }
   );
}); 
</script>


<script type="text/javascript">
$(document).ready(function(){
var dialogOptsPass = {
      modal: true,
      bgiframe: true,
      autoOpen: false,
      height: 400,
      width: 550,
      draggable: true,
      resizeable: true,
      title: "Change your pasword",
   };
$("#passwordbox").dialog(dialogOptsPass);   //end dialog

   $('#passwordbutton').click(
      function() {
         $("#passwordbox").load("change_password/index.php", [], function(){
               $("#passwordbox").dialog("open");
            }
         );
         return false;
      }
   );
}); 
</script>

Is it posible to combine the two scripts????