php - jquery clone to add more fileds -

working example in jsfiddle

$(function () {      $("#addbutton").on("click", function () {          var newrow = $(".addrows").first().clone().addclass("newadded");                        newrow.appendto("#textboxesgroup");       });     <form enctype="application/x-www-form-urlencoded" action="" method="post">  <table id="textboxesgroup" style="width:auto;margin:0 auto;" >         <tr class="addrows"><td  class="required"> start time:<br/> <input type="text" name="starttime[]" id="starttime" value="" class="time" size="5"> <button name="starttimenow" id="starttimenow" type="button" onclick="var currentdate = new date(); var hours = currentdate.gethours(); var minutes = currentdate.getminutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#starttime&#39;).val(hours + &#39;:&#39; + minutes);">now</button> </td> <td  class='required' colspan="2">start date:<br/> <input type="text" name="startdate[]" id="startdate" value="" class="date" autocomplete="off" size="6"> <button name="startdatetoday" id="startdatetoday" type="button" onclick="var currentdate = new date(); var month=currentdate.getmonth()+1; if(month < 10) { month = &#39;0&#39; + month; } var day = currentdate.getdate(); if(day < 10) { day = &#39;0&#39; + day; } var year = currentdate.getfullyear(); $(&#39;#startdate&#39;).val(day + &#39;/&#39; + month + &#39;/&#39; + year)">today</button>     </td> <td class='required' >end time:<br/> <input type="text" name="endtime[]" id="endtime" value="" class="time" size="5"> <button name="endtimenow" id="endtimenow" type="button" onclick="var currentdate = new date(); var hours = currentdate.gethours(); var minutes = currentdate.getminutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#endtime&#39;).val(hours + &#39;:&#39; + minutes);">now</button> </td> <td class='required' colspan="2" >end date:<br/> <input type="text" name="enddate[]" id="enddate" value="" class="date" autocomplete="off" size="6"> <button name="enddatetoday" id="enddatetoday" type="button" onclick="var currentdate = new date(); var month=currentdate.getmonth()+1; if(month < 10) { month = &#39;0&#39; + month; } var day = currentdate.getdate(); if(day < 10) { day = &#39;0&#39; + day; } var year = currentdate.getfullyear(); $(&#39;#enddate&#39;).val(day + &#39;/&#39; + month + &#39;/&#39; + year)">today</button>     </td></tr>     </table>     <table>     <tr>         <td>             <input type="button" id="addbutton" value="+" />         </td>      </tr>    <tr><td colspan="18" align="center"> <input type="submit" name="submit" id="submit" value="submit" class="formsubmit"> </td></tr> </table> </form> 

the above 1 working example form. need create number of fields when press + button. new fields should empty. when press now/today button need display date , time in exact fields other first field.

please me. thanks!

clear cloned input fields val(''):

$("#addbutton").on("click", function () {     var newrow = $(".addrows").first().clone().addclass("newadded");     newrow.find(':input').val('');     newrow.appendto("#textboxesgroup"); }); 

and reference correct row fields use classes instead of ids , prev method find proper element:

<input type="text" name="starttime[]" class="starttime" value="" class="time" size="5"> 

js:

$(this).prev('.starttime').val(hours + ':' + minutes); 

demo: http://jsfiddle.net/xeels/424/