The addrow datepicker does not appear, how to solve it

how to solve it

The addrow datepicker does not appear

I am already doing an addrow using the datepicker, why does the datepicker not appear when adding rows

So on the first row the datepicker runs, but if you click the add button, the second row and so on the datepicker doesn’t work.

<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">

this is html

                                            <table class="table mt-4" style="border:border-radius: 20px;background-color: #fafafa">
                                                    <tbody class="input_fields_wrap_jadwal">
                                                        <tr align="center">
                                                            <th>struktur rencana kegiatan </th>
                                                            <th width="250px">Tanggal Mulai</th>
                                                            <th width="250px">Tanggal Selesai</th>
                                                            <th><button class="add_field_button_jadwal"
                                                                    title="Tambah Jadwal"><i class="fas fa-plus"></i></button>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
                                                            <td align="center">
                                                                    <input type="text" name="tanggal_mulai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
                                                            </td>
                                                            <td align="center">
                                                                <input type="text" name="tanggal_selesai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                    </tbody>
                                                </table>

this is javascript

When adding rows, the datepicker is not active

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
    $( ".datepicker" ).datepicker({
        dateFormat: "dd-mm-yy"
        });
    });
</script>
 <script>
$(document).ready(function () {
var max_fields_jadwan = 100; //maximum input boxes allowed
//=================================================================================================//
//input jadwal
var wrapper_jadwal = $(".input_fields_wrap_jadwal"); //Fields wrapper
var add_button_jadwal = $(".add_field_button_jadwal"); //Add button ID
var awal = '{{$paket[0]->rencana_awal}}';
var akhir = '{{$paket[0]->rencana_akhir}}';
var tanggal_akhir = '{{cal_days_in_month(CAL_GREGORIAN, date('m', strtotime($paket[0]->rencana_akhir)) , date('Y', strtotime($paket[0]->rencana_akhir)))}}';

var x = 1; //initlal text box count
$(add_button_jadwal).click(function (e) { //on add input button click
    e.preventDefault();
    if (x < max_fields_jadwan) { //max input box allowed
        x++; //text box increment
        $(wrapper_jadwal).append('<tr class="input_fields_wrap_jadwal">
                                <td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
                                <td align="center">
                                        <input type="text" name="tanggal_mulai[]" min="'+awal+'-01" max="'+akhir+'-'+tanggal_akhir+'" value="" class="form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
                                </td>
                                <td align="center">
                                    <input type="text" name="tanggal_selesai[]" min="'+awal+'-01" max="'+akhir+'-'+tanggal_akhir+'" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
                                </td>
                                <td>
                                    <a href="#" class="remove_field_jadwal" title="Hapus"><i class="fas fa-trash-alt"></i></a>
                                </td>
                            </tr>'); // add input boxes.
    }
});

$(wrapper_jadwal).on("click", ".remove_field_jadwal", function (e) { //user click on remove text
    e.preventDefault();
    $(this).parent('td').parent('tr').remove();
    x--;
})

});
</script>
<script>


let form = document.forms["user-registration-form"];

    // Required Field validation
    function showValidityCue(input) {
    let isValid = input.checkValidity();
    if (input.type === "text" || input.type === "number" || input.pattern) {
        const regPattern = new RegExp(input.pattern ? input.pattern : "^[a-zA-Z0-9]+");
        isValid = regPattern.test(input.value);
    }
    if (isValid) {
        input.style.borderColor = "green";
        input.parentNode.classList.add("validBlock");
        input.parentNode.classList.remove("invalidBlock");
        input.setCustomValidity("");
    } else {
        input.style.borderColor = "red";
        input.parentNode.classList.remove("validBlock");
        input.parentNode.classList.add("invalidBlock");
        input.setCustomValidity(input.title);
    }
    }
</script>

help me to solve it

Answer

You need to initialize your .datepicker for the added rows .So , for that just use $(".input_fields_wrap_jadwal tr:last .datepicker").. this will get last tr added and then initialize your datepicker inside that tr .

Demo Code :

$(function() {
  $(".datepicker").datepicker({
    dateFormat: "dd-mm-yy"
  });
});
var max_fields_jadwan = 100;
var wrapper_jadwal = $(".input_fields_wrap_jadwal"); //Fields wrapper
var add_button_jadwal = $(".add_field_button_jadwal"); //Add button ID
var awal = '1';
var akhir = 'aomwhtnr';
var tanggal_akhir = '2-02-2020';

var x = 1; //initlal text box count
$(add_button_jadwal).click(function(e) { //on add input button click
  e.preventDefault();
  if (x < max_fields_jadwan) { //max input box allowed
    x++; //text box increment
    $(wrapper_jadwal).append('<tr class="input_fields_wrap_jadwal"><td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td><td align="center"> <input type="text" name="tanggal_mulai[]" min="' + awal + '-01" max="' + akhir + '-' + tanggal_akhir + '" value="" class="form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required> </td><td align="center"> <input type="text" name="tanggal_selesai[]" min="' + awal + '-01" max="' + akhir + '-' + tanggal_akhir + '" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td> <td><a href="#" class="remove_field_jadwal" title="Hapus"><i class="fas fa-trash-alt"></i></a></td></tr>');
    //get last tr added > .datepicker initialize them
    $(".input_fields_wrap_jadwal tr:last .datepicker").datepicker({
      dateFormat: "dd-mm-yy"
    });
  }
});

<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>
<table class="table mt-4" style="border:border-radius: 20px;background-color: #fafafa">
  <tbody class="input_fields_wrap_jadwal">
    <tr align="center">
      <th>struktur rencana kegiatan </th>
      <th width="250px">Tanggal Mulai</th>
      <th width="250px">Tanggal Selesai</th>
      <th><button class="add_field_button_jadwal" title="Tambah Jadwal"><i class="fas fa-plus">+</i></button>
      </th>
    </tr>
    <tr>
      <td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
      <td align="center">
        <input type="text" name="tanggal_mulai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
      </td>
      <td align="center">
        <input type="text" name="tanggal_selesai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>