Dynamic forms and JQuery UI date input

Question

I have a form where you can input some information and click a button which will add a replica of that form, this can be done over and over again until they are happy with the information placed.

On this form, I have two date inputs, one which is date_from and another which is date_to, these are arrays to enable more forms on this page. What I am having trouble with, is I'm using JQuery's datepicker UI and at the minute, the inputs have id's so the datepicker can only be used once.

How would I get it so that the JQuery datepicker can be used on each date input which comes up?

This is my code so far...

$(function() {
    $("#to-date").datepicker({
        dateFormat: "dd/mm/yy",
        altField: "#alt-to",
        altFormat: "yy-mm-dd"
});

    $("#from-date").datepicker({
        dateFormat: "dd/mm/yy",
        altField: "#alt-from",
        altFormat: "yy-mm-dd"
    });
});

Here's my JSFiddle, although the datepicker isn't working on this, but it is on my desktop.

Any help would be appreciated.

Answer 1

Use a class to select the inputs.

<input type="text" id="from-date"  class="from_date" value="">

$(".from_date").datepicker({...});

Edit With the updates (through the comment on my answer) question I found the solution here.

You can use JQuery selectors in the altField to get to the input you want the date to be shown in.