datepicker updating wrong tab

datepicker updating wrong tab

The datepickers in tabs-2 will update tabs-1 even though the selecter used explicitly states tabs-2.  How do I get the datepickers to update the tabs they are on?
 
  1. <!DOCTYPE html>
    <html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Datepicker/Tabs</title>
     <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
     <script>
      $(function() {
       $("#tabs").tabs();
       $("#tabs-1 #datepicker").datepicker({defaultDate: +1});
       $("#tabs-1 #datepicker2").datepicker({defaultDate: +2});
       $("#tabs-2 #datepicker").datepicker({defaultDate: +3});
       $("#tabs-2 #datepicker2").datepicker({defaultDate: +4});
      });
     </script>
    </head>
    <body>
    <div class="demo">


















  2. <div id="tabs">
     <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      <li><a href="#tabs-2">Tab 2</a></li>
     </ul>
     <div id="tabs-1">
      <form>
      <input type=text id=datepicker>
      <br><input type=text id=datepicker2>
      </form>
     </div>
     <div id="tabs-2">
      <form>
      <input type=text id=datepicker>
      <br><input type=text id=datepicker2>
      </form>
     </div>
    </div>
















  3. </body>
    </html>