Datepicker not working for html table rows except first row

i have create a grid view where 3 date columns are there . when i fetch the data from database
shown in that grid date is coming but along date picker is there with every 3 fields when i m running that only first row
showing date picker not rest of them please tell me the solution

<table align=center>

<tr>			<th>Check/UnCheck</th>
                <th>MYear</th>
                <th>Date1</th>
                <th>Date2</th>
                <!-- <th>Bank Value Date</th> -->
</tr>
<%for(int i=0 ; i<mYearVector.size();i++)
{
	
%>
 <tr>
<td align="top">
<INPUT class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" value="<%=(String)newValues.elementAt(0)+","%><%=(String)newValues.elementAt(1)+","%><%=(String)newValues.elementAt(2)%>" size="50">
</td>
<td align="left">
<input class=inputText type="text" name="mYear" id="mYear"  value="<%=mYearVector.elementAt(i)%>"  readonly>
</td>

<td>

			<input type=text class=inputText readonly name=payrollCutOffDate id=payrollCutOffDate value="<%=(oldValues.elementAt(0)==null?"":oldValues.elementAt(0))%>">
			<input  type=button value="<%=messages.getLocalizedString("Date1")%>" class=buttonstyle 
					onmouseover="onMouseOver(this)"
					onmouseout="onMouseOut(this)" 
					onclick="javascript:show_calendar('Date1');"/> 
			
</td>


<td>
			
			<input type=text class=inputText readonly name=payrollPaymentDate id=payrollPaymentDate value="<%=(oldValues.elementAt(1)==null?"":oldValues.elementAt(1))%>">
			<input  type=button value="<%=messages.getLocalizedString("Date2")%>" class=buttonstyle 
					onmouseover="onMouseOver(this)"
					onmouseout="onMouseOut(this)" 
					onclick="javascript:show_calendar('Date2');"/> 
			
</td>

</tr> 
<%}%>

</table>

Select all Open in new window