Multiple datepicker problem with same ID

Question

hi, here is my problem:

<input type="text" class="datepick1" id="date" />
<input type="text" class="datepick2" id="date" />
<input type="text" class="datepick3" id="date" />

then i apply datepicker on dom (by classname)

$('.datepick1').datepicker();
$('.datepick2').datepicker();
$('.datepick3').datepicker();

=> the three dom have datepicker but, onselect date, it change automatically the first one (datepick1)

HELP

Answer 1

Your three inputs have the same id attribute on them. You can't do that, id attributes must be unique within the document. (Having the same name, on the other hand, is fine in forms -- and common, for instance for radio buttons.)

Edit So your code posted to the comment below wants to be changed to:

$('<td></td>').append(
    $(NewLivraison.template.date)
        .val(arguments.date_livraison)
        .attr('id','date_' + arguments.num) // <== Note it's "id" we're making unique
        .addClass('date_' + arguments.num)  // <== You can probably drop this entirely
        .datepicker()
).css('vertical-align','top');

Answer 2

Supposed to be like this

<input type="text" id="datepick1" class="date" />
<input type="text" id="datepick2" class="date" />
<input type="text" id="datepick3" class="date" />

$('.date').datepicker();