When i click on add more button the new datepicker field is added the previous datepicker value is reset

Question

The problem is ,when i click the "Add Button" new datepicker field is added which display the current date as default and when i change manually the date and click on add button then it will reset the default value in all datepicker.

MY CODE IS BELOW:

<div class="form-group row">
  <label for="example-date-input" class="col-2 col-form-label" style="margin-left:28.5%;">DATE</label>
  <div class="col-10">
    <input class="form-control datepicker pick" id="date[]" name="date[]" value="<?php echo $_POST['date'] ?>" style="" type="text" readonly>
  </div>
</div>

<div class="form-group">

<div class="col-md-8 col-sm-12 col-24">
    <div class="input_fields" style="color:black">
         <button class="add_field btn " onclick="incrementValue()" style="">Add More</button>
         <div>
         <input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>
</div>

javascript:

 $(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields"); //Fields wrapper
var add_button      = $(".add_field"); //Add button ID
var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();

    if(x < max_fields){ //max input box allowed
        x++; //text box increment
 $(wrapper).prepend('<div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pick" id="date[]" name="date[]" style="" type="text"></div></div>');$( ".datepicker.pick" ).datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", "0");}});});

Because you are using class name to reset the date. So all the input having the class name `.datepicker.pick` will be reset. I think you have problem in your JQuery. If `.datepick("setDate", "0")` set date then all will be set beause you are using the class name. and why `.datepicker.pick` — BetaDev, Apr 03 '17 at 16:21
You should be able to create unique ID for each input area when you click add more and reset value on the basis of that ID. Or simply dont reset the value if you wanna use class to set date to an input area. — BetaDev, Apr 03 '17 at 16:33
just use your class name properly and dont use `.datepick("setDate", "0")` to reset the input box. — BetaDev, Apr 03 '17 at 16:34
i want to display the current date as the default input value so i have use this .datepick("setDate", "0") @webDev — Rice, Apr 03 '17 at 16:39
yeah thats why if you use class to set date that will reset all the date, you are setting date as 0. If you use ID then oaky but class will match all the class and set date as 0. see my answer below — BetaDev, Apr 03 '17 at 16:46

score 1 · Answer 1 · edited May 23 '17 at 10:30

so for your requirement create unique ID for each field (input box) by attaching the count or something variable to the ID. and create your JS also with ID not using class. SO that will nto affect other input box.
Something like this, see ID of the box and date picker method too

$(wrapper).prepend('<div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pick" id="date_'+x+'" name="date[]" style="" type="text"></div></div>');$( "#date_"+x ).datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", "0");}});});

Please notice ID implementation.

Important: Please look at into the difference between using class and ID.

Difference between class and ID

JQuery Selectors-w3school

How do I select an item using class or ID?