dynamically added Coldfusion Datefield does not trigger calendar

Question

I've cloned and appended datefields using jquery to a form. I do this by clicking on an add button which calls the clone method to clone the previous field row. I then rename the individual inputs for the cloned row. I'm only allowed to use the coldfusion datefield, even though I've been able to rename the ids of the different elements that make up the field it still does not trigger the calendar. The next step I think will be for me to manually code the functionality of the datefield but I don't want to go down that road. Please help with a better solution and code sample if possible that does not involve me using a jquery plugin.

here is my code sample`

$('img', $(newElement)).each(function () {                              
  var parentID = $(this).parent('div').attr('id','taskDueDate_'+TotalInputs+'newTasks_cf_buttondiv');
  var calendarDivID = parentID.siblings('div').attr('id','taskDueDate_'+TotalInputs+'newTasks_cf_container.yui-calcontainer.single.withtitle')
  var calendarTableID = calendarDivID.children('table').attr('id','taskDueDate_'+TotalInputs+'_cf_calendar'+parseInt(3+i))
  calendarTableID.find('td').each(function(){
    var calendarTableTdID = $(this).attr('id').replace('taskDueDate_1_cf_calendar3','taskDueDate_'+TotalInputs+'_cf_calendar'+parseInt(3+i));
    var newCalendarTableTdID = $(this).attr('id', calendarTableTdID)//alert(calendarTableTdID);
  });
  //console.log(calendarTableTdID);
  //var currCalendarTableTdID = calendarTableTdID.replace('taskDueDate_'+i,'taskDueDate_'+TotalInputs);
  $(this).attr('id','taskDueDate_'+TotalInputs+'newTasks_cf_button');
});`

Answer 1

This approach might work. Write a ColdFusion function that does something like this:

<cffunction name="something">
<cfargument name="idIn">
<cfsavecontent variable = "htmlToReturn">
code to generate the required html, including the
cfcalendar, using the incoming argument
</cfsavecontent>
<cfreturn htmlToReturn>

In your actual page, when you want to add more stuff to your form, use javascript to make an ajax call that calls this function and populate a div with the returned html.