JQuery datepicker function for dynamic created date inputs

Question

I'm trying to use jquery's datepicker for dynamic form fields. This is my fiddle that show the issue.

below is my code

<div class="box-body" id="collapse1">
 
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label>
          <red>*</red>
          Full Name (As on NRIC/FIN)
        </label>
        <input type="text" class="form-control">
      </div>

      <div class="form-group">
        <label>
          <red>*</red>
          Gender
        </label>
        <div class="radio row">
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" id="male"> Male
            </label>
          </div>
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" id="female"> Female
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          Date Of Birth (DD-MM-YYYY)
        </label>
        <input type="text" name="date" class="datepicker">
      </form-group>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          NRIC / FIN
        </label>
        <input type="text" class="form-control">
      </form-group>
    </div>
  </div>
</div>



<div id="parent" class="col-md-3">
  <div id="child" class="col-md-3">
  </div>
</div>
<br />
<div>
  <button type="button" onclick="addInputLine()">
    press
  </button>
</div>

Steps to reproduce:

1. click "press" button
2. A new div with a second date input appears

Expected result: able to pick date for x amount of date input field created

Actual result: date pick on the second input field update the first field

What I have tried: I apply solution from this page, it does not work for me

I want to do this for any amount of inputs dynamically created by the user. Thanks for the help!

Answer 1

You can use clone() for cloning your collapse1 div . Then , whenever user click on press button simply use .append() to append new divs inside your parent div and then intialize your datepicker using $("#parent .block:last").find(".datepicker").datepicker({//options})

Demo Code :

$(function() {
  var target = $("#collapse1").clone(); //keep clone..for further use
  $(".datepicker").datepicker({
    dateFormat: "dd-mm-yy"
  });
  //on click of press
  $(".press").on("click", function() {
    $("#parent").append("<br><div class='block'>" + $(target).html() + "</div>") //append block div
    $("#parent .block:last").find(".datepicker").datepicker({
      dateFormat: "dd-mm-yy"
    }); //then intialize your datepicker
  })
});

.block {
  border: 2px solid black
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="box-body" id="collapse1">

  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label>
          <red>*</red>
          Full Name (As on NRIC/FIN)
        </label>
        <input type="text" class="form-control">
      </div>

      <div class="form-group">
        <label>
          <red>*</red>
          Gender
        </label>
        <div class="radio row">
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" class="male"> Male
            </label>
          </div>
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" class="female"> Female
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          Date Of Birth (DD-MM-YYYY)
        </label>
        <input type="text" name="date" class="datepicker">
      </form-group>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          NRIC / FIN
        </label>
        <input type="text" class="form-control">
      </form-group>
    </div>
  </div>
</div>



<div id="parent" class="col-md-3">
  <div id="child" class="col-md-3">
  </div>
</div>
<br />
<div>
  <button type="button" class="press">
    press
  </button>
</div>