jQuery – Multiple datepicker fields in 1 form problem

[kam]

I have a form with a DIV that contains information regarding 1 person in a family. The DIV, all input IDs and Names terminate with _1. If the user wishes to add another person to the family they push a button and this jQuery creates a new DIV and elements all with the _2 ID and name.

  $("#butt").click(function () {

var num = parseInt($("#playerCount").val());

$("#playerCount").val(num + 1);

$("#player_"+num).clone(true).attr('id', 'player_' + (num + 1)).insertAfter("#player_"+num);

var new_player_div_inputs = "#player_"+(num+1)+" input";

$(new_player_div_inputs).each(function(index) {

var id = $(this).attr("id");

var new_id = id.substring(0,id.indexOf("_") + 1) + (num + 1);

$(this).attr("id", new_id);

$(this).attr("name", new_id);

});

one of these inputs is a datepicker field

The problem arises from the cloned DIVs and the datepicker plugin. When I put the focus into one of the newly cloned datepicker fields the popup appears but any input always end up in the first DIV. It works fine if I put many fields in as HTML like this:

But not when the DIV is cloned.

I do see this though in the firebug output:

jQuery16101687445242816391=Object { events={...}}datepicker=Object { id="bDate_1", input={...}, more...}

jQuery16101687445242816391=Object { events={...}}datepicker=Object { id="bDate_1", input={...}, more...}

Any idea how to get the datepicker to populate the correct fields?

Kevin

[Author]

Posts