Apply jQuery Datepicker to dynamically added fields

Question

I made a form with a "date" field and used jQuery Datepicker to enter the date. I also made a function to add more fields similar to those already existing in form:

Code entering new fields:

$('#add_field').click (function(e) {
            //e.preventDefault();     //prevenir novos clicks
            if (x < campos_max) {
                $('#listas').append('\
                    <div class="row">\
                        <div class="form-group col-md-4">\
                            <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>\
                                <option value="">Selecione</option>\
                                @if(count($tests) > 0)\
                                    @foreach($tests as $item)\
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>\
                                    @endforeach\
                                @endif\
                            </select>\
                        </div>\
                        <div class="form-group col-md-2">\
                            <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>\
                        </div>\
                        <div class="form-group col-md-2">\
                            <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>\
                        </div>\
                        <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>\
                    </div>');
                x++;
            }
        });

Does anyone have an idea of why Datepicker does not work in the added fields?

Answer 1

After the .append restart the component with:

$(".date").datepicker();

This will apply the plugin to the new fields that have been added.

Behold:

$(function(){

   $(".date").datepicker();

   var x = 1;
   var campos_max = 5;
   $('#add_field').click (function(e) {
      //e.preventDefault();     //prevenir novos clicks
      if (x < campos_max) {
          $('#listas').append('\
              <div class="row">\
                  <div class="form-group col-md-4">\
                      <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>\
                          <option value="">Selecione</option>\
                      </select>\
                  </div>\
                  <div class="form-group col-md-2">\
                      <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>\
                  </div>\
                  <div class="form-group col-md-2">\
                      <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>\
                  </div>\
                  <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>\
              </div>');
          x++;
         $(".date").datepicker();
      }
      
   });
});

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

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div id="listas">
  <div class="row">
      <div class="form-group col-md-4">
          <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>
              <option value="">Selecione</option>
          </select>
      </div>
      <div class="form-group col-md-2">
          <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>
      </div>
      <div class="form-group col-md-2">
          <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>
      </div>
      <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>
  </div>
</div>
<button id="add_field">Adicionar</button>