Jquery Timepicker for Dynamic created textbox

Question

I need to timepicker for the dynamically created textbox which i'm using jquery timepicker plugin

Below is my code which i have tried its not working

<script src="https://www.jqueryscript.net/demo/Time-Selection-Popover-jQuery-Timepicker/dist/js/timepicker.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Time-Selection-Popover-jQuery-Timepicker/dist/css/timepicker.css">

Dynamic HTML FORM

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 0; //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).append('<fieldset><div class="form-group"><label class="col-sm-1 control-label">Period</label><div class="col-md-1"><input type="checkbox" class="" id="break_id'+x+'" onclick="setbreak('+x+')" name="is_break" value="1">Break </div><div class="col-sm-2 "><input type="text" class="form-control" onclick="get_timepick('+x+')" id="from_time['+x+']" name="from_time[]" id="from_time'+x+'"  placeholder="From Time" required></div><div class="col-sm-2"><input type="text" class="form-control timepicker" name="to_time['+x+']" id="to_time['+x+']"  placeholder="To time"></div><div class="col-sm-2"><select id="subject_id'+x+'" name="subject_id['+x+']" class="subject_id selectpicker"></select></div><div class="col-sm-2"><select id="teacher_id'+x+'" name="teacher_id['+x+']" class="teacher_id selectpicker"></select></div></div><a href="#" class="remove_field">Remove</a></fieldset>'); //add input box
        $('#from_time'+x+'').timepicker();
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('fieldset').remove(); x--;
})

});

Script which i tried like this

function get_timepick(sel){  
   $(document).ready(function () {
     $('#from_time'+sel+'').timepicker();
   });
 }

i'M Getting below error in console Uncaught TypeError: Cannot read property 'nodeName' of undefined

Thanks in advance

Answer 1

Removed duplicate document ready event in get_timepick().

Removed duplicate id attribute of from date field.

Your Code will be like:

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 0; //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).append('<fieldset><div class="form-group"><label class="col-sm-1 control-label">Period</label><div class="col-md-1"><input type="checkbox" class="" id="break_id'+x+'" onclick="setbreak('+x+')" name="is_break" value="1">Break </div><div class="col-sm-2 "><input type="text" class="form-control" onclick="get_timepick('+x+')" name="from_time[]" id="from_time'+x+'"  placeholder="From Time" required></div><div class="col-sm-2"><input type="text" class="form-control timepicker" name="to_time['+x+']" id="to_time'+x+'"  placeholder="To time"></div><div class="col-sm-2"><select id="subject_id'+x+'" name="subject_id['+x+']" class="subject_id selectpicker"></select></div><div class="col-sm-2"><select id="teacher_id'+x+'" name="teacher_id['+x+']" class="teacher_id selectpicker"></select></div></div><a href="#" class="remove_field">Remove</a></fieldset>'); //add input box
        $('#from_time'+x+'').timepicker();
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('fieldset').remove(); x--;
    })


function get_timepick(sel){  
     $('#from_time'+sel+'').timepicker();
 }