Cloning a timepicker and datepicker

Question

After reading all the subjects about it, I couldn't find my solution.

I have a datepicker and 2 timepickers fields that I would like to clone. Those are to declare an intervention (date, start time, end time) that can last several days.

I don't want to copy the values from the first row in the new one, but I need all the fields to have a different id to store it in a database.

Example :

day 1 : 12-12-2013
Start time 1 : 08:30
End time 2 : 17:30
day 2 : 14-12-2013
Start time 1 : 09:30
End time 2 : 14:30

My code for the fields is the following :

<input type="text" size=10 name="RCFSRdate[]" id="RCFSRdate" value="<?php echo $RCFSR_date; ?>" />
<script type="text/javascript" >
$('.RCFSRdate').datepicker({dateFormat: 'yy-mm-dd'});
</script>

<input type="text" size=5 name="RCFSRstarttime" id="starttime" value="<?php echo $RCFSR_starttime; ?>" />
<script type="text/javascript">
$('#starttime').timepicker({
   minuteGrid: 30,
   stepMinute: 30,
   timeSeparator: 'h'
});
</script>

<input type="text" size=5 name="RCFSRendtime" id="endtime" value="<?php echo $RCFSR_endtime; ?>" />
<script type="text/javascript">
$('#endtime').timepicker({
  minuteGrid: 30,
  stepMinute: 30,
  timeSeparator: 'h'
});
</script>

I would like to add a button "add day" that will duplicate this bloc but increasing the id's AND the timepicker selector to allow me to have different values for each fields. I tried relCopy and other jQuery plugins with no success for the moment. I know I'm close to the solution, but I'm not good enough in js to know what I'm doing exactly..

Any help is welcome !

Thanks in advance

Answer 1

First, a quick suggestion: I would keep all your javascript at the end of the HTML file.

For your solution, I would look into AngularJS. I've been using this for a couple years, and it makes data binding and HTML templating really simple.