Date appears in the wrong place when I use <s:iterator> inside <s:iterator> and jquery UI timepicker

[will zhang]

As the following img shows, when I click the datepicker icon to select the date, the selected date will always appear in the field as upper as possible.
Example: if I click the 1st icon in the 2nd table, the selected date will appear in the 1st field of 1st table.
if I click the 1st icon in the 3nd table, the selected date will also appear in the 1st field of 1st table.

Anyone has similar error or any hint? Thanks

<s:iterator value="studentList" id="group" status="ind">
    <s:iterator value="segmentList" id="segment" status="stat">
          <s:property value="segmentId" /><s:hidden name="segmentList[%{#stat.index}].segmentId" />
	  <s:textfield 	name="segmentList[%{#stat.index}].departureDate" required="true" size="8" cssClass="datepicker"/>
    </s:iterator>
</s:iterator>

	<script type="text/javascript">
	$(function() {
		$(".datepicker").datepicker({
			changeMonth: true,
			changeYear: true,
			yearRange: '-5:+5',
			showOn: 'button', buttonImageOnly: true, buttonImage: 'images/calendar.gif'
		});
	});
	</script>    

[will zhang]

Solved, it's because the id is the same.