Unable to use multiple datepicker instances

Unable to use multiple datepicker instances

Hi,

I've been unsuccessfully trying to get the datepicker to work on multiple instances on the same form.

Head:
  1. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  2.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  4.   
  5.   <script>
  6.   $(document).ready(function() {
  7.     $("#datepicker").datepicker();
  9.   });
  10.   </script>

Form:

  1. <label for="dob">Date of Birth <span class="redstar">*</span></label>
  2. <span id="sprytextfield5">
  3. <input type="text" name="dob" id="datepicker" placeholder="mm/dd/yyyy" />
  4.  <span class="textfieldRequiredMsg">Required.</span><span class="textfieldInvalidFormatMsg">Invalid.</span></span>



  8. <label for="start_date">Available start date <span class="redstar">*</span></label>
  9. <span id="sprytextfield5">
  10. <input type="text" name="start_date" id="datepicker" placeholder="mm/dd/yyyy" />
  11. <span class="textfieldRequiredMsg">Required.</span><span class="textfieldInvalidFormatMsg">Invalid.</span></span>


Also, I realise that I cannot have two same ids on the same page. But the datepicker doesn't work when I use the class. I'm a newbie, any help is greatly appreciated. 

Thanks.

Sohail