I am trying to create a dynamic table with each row containing two date fields. I am using Jquery datepicker. For some reason only the first row is showing in the date picker calendar. Other dynamically created fields are not showing the calendar. I should mention that the first row is by default in place when this page is loaded. Only from the second line it's dynamically created. All solutions say I should reinitialize the .datepicker(). I did and it's not working. I tried changing names and Ids still no solution. Is there something I am missing here. Below is the code used for this purpose.

Yes I know there are several questions related to this here in this site. But some how I couldn't find a solution to this as they aren't working for me.

Javascript:

$(#addurl).click(function(){

var idValue = input[id='breachCount'];

var counter = $(idValue).val();

var trValue = $(#rowPH+counter).html();

var countNew = parseInt(counter)+1;

$(idValue).val(countNew);

var newFile = <tr id='rowPH+countNew+'>+trValue+</tr>;

$(newFile).insertBefore(#addLink);

var nameTemp, actNm;

var dcounter=0;

$('#rowPH'+countNew+' input').each(function(){

    nameTemp = $(this).attr(name);

    if(nameTemp){

        actNm = nameTemp.substring(nameTemp.indexOf(.));

  $(this).attr(name,breachList[+countNew+]+actNm+countNew);

    }

    });

$('.datepicker').each(function(i) {

            this.id = 'datepicker' + i;

    }).datepicker();                

});

Html:

<table>.....

<tr id=rowPH0>

<td>

<input type=checkbox checked=checked>

</td>

<td>

<input class=text_box_2 div_center type=text value= name=breachList[0].breachText>

</td>

<td>

<input id=datepicker0 class=datepicker date_txt hasDatepicker type=text value= name=breachList[0].activationDt><img class=calendar src=assets/images/calendar_icon.png>

</td>

<td>

   <input id=datepicker1 class=datepicker date_txt hasDatepicker type=text value=  name=breachList[0].deactivationDt>

   <input type=checkbox name=breachList[0].deactiveNa checked=checked>

</td>

<td>

   <input class=text_box_2 type=text value= name=breachList[0].note>

</td>

</tr>

</tbody>

<tbody>

<tr id=rowPH1>

<td>

    <input type=checkbox checked=checked>

</td>

<td>

    <input class=text_box_2 div_center type=text value= name=breachList[1].breachText1>

</td>

<td>

  <input id=datepicker2 class=datepicker date_txt hasDatepicker type=text value= name=breachList[1].activationDt1>

    <img class=calendar src=assets/images/calendar_icon.png>

</td>

<td>

     <input id=datepicker3 class=datepicker date_txt hasDatepicker type=text value= name=breachList[1].deactivationDt1>

    <input type=checkbox name=breachList[1].deactiveNa1 checked=checked>

</td>

<td>

</tr>

<tr id=addLink>

    <td colspan=5 ><a href=javascript:void(0); id=addurl>+ Add another row</a>

     <input type=hidden id=breachCount value=${fn:length(auditStandardBreachsForm.breachList)-1}/>

</td></tr>

...</table>