Why isn't this jQuery with flatpickr working? (dynamically add/remove date-time field)

Question

this is driving me nuts.

Here is jfiddle showing situation:

https://jsfiddle.net/mao2je6k/

I am trying to dynamically add date-time input fields. I am using flatpickr for the date-time choosing.

Seems like no matter what I do, only the first click(function() is triggered. So, the remove click is not triggering, and nor is flatpickr being triggered on a click of the input field.

I have a feeling it is a jQuery conflict issue, but just don't know how I am supposed to alter this so that all functionality works with one another.

Everything is in the jfiddle, but here is the HTML and JS:

<div id="meta_inner">
    <span id="here"></span>
    <span class="add">Add Group</span>
</div>

$(document).ready(function () {
    var count = 1;

    $(".add").click(function() {
       count = count + 1;
       $('#here').append('<p> Group Name <input type="text" name="groups['+count+'][post_title]" value="" /> -- Start Date : <input id="datetime_'+count+'" type="text" name="groups['+count+'][startdate]" value="" /><span class="remove">Remove Group</span><input type="hidden" name="groups['+count+'][object_id]" value="" /></p>' );
       return false;
     });

     $("#here").on('click', '.remove', function() {
          $(this).parent().remove();
     });

      var config =  {
                    enableTime: true,
                    dateFormat: "Y-m-d H:i",
                    minDate: "today",
                    maxDate: new Date().fp_incr(365)
      };

      $("#here").on('click', '[id *="datetime_"]', function() {
          $(this).flatpickr(config);
     });

});

Edit:

Based on linked post in comments, modified the jQuery (modified version shown above).

Now things are almost working, but when I click the date field, the flatpickr calendar pops up and immediately closes.

Current fiddle is https://jsfiddle.net/mao2je6k/1/

Any idea what is causing that?

Answer 1

this problem is occurs when you try to add listener o the elements that are not in the Dom yet.

you add listener on the element for removing it but that element attached to DOM after click on add button.

you need to add listener on the parent. you can read more about it in ".live() - .delegate() .on()" methods of jQuery.

here your answer: ** https://jsfiddle.net/wgz8pn3b/23/ **