javascript - Apply jQuery datepicker to multiple instances

Question

I've got a jQuery date picker control that works fine for once instance, but I'm not sure how to get it to work for multiple instances.

<script type="text/javascript">
    $(function() {
        $('#my_date').datepicker();
    });
</script>

<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>

Without the For Each loop, it works fine, but if there's more than one item in the "MyRecords" collection, then only the first text box gets a date picker (which makes sense since it's tied to the ID). I tried assigning a class to the text box and specifying:

$('.my_class').datepicker();

but while that shows a date picker everywhere, they all update the first text box.

What is the right way to make this work?

Answer 1

html:

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

script:

$('.datepick').each(function(){
    $(this).datepicker();
});

(pseudo coded up a bit to keep it simpler)