JQuery Datetimepicker not working when loaded dynamically-CodePudding

Im having trouble getting the datetimepicker to load fully in the following: it adds the elements to the page but clicking on the calendar icon does not function like the first set does. Im new to web page building be gentle

Here is the jsfiddle: https://jsfiddle.net/gq8a7k14/

The first 2 datetimepickers work fine, when you click the add button, a new set is added but they dont work.

<?php

?>

<html>
<head>
<title>SubmitYourTime</title>
<link href='assets/css/phppot-style.css' type='text/css' rel='stylesheet' />
<link rel='stylesheet' type='text/css' 
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css'>
<style type='text/css'>
    .container {
        margin-top: 40px;
    }
    .btn-primary {
        width: 100%;
    }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


<script type='text/javascript'>
    $( document ).ready(function() {
        $('#datetimepicker0s').datetimepicker();
        $('#datetimepicker0e').datetimepicker();
        $('.add').on('click', add);
        $('.remove').on('click', remove);

    });
    function add() {
            
          var new_chq_no = parseInt($('#total_chq').val())   1;
          $("#datetimepicker"   new_chq_no   "s").datetimepicker();
          $("#datetimepicker"   new_chq_no   "e").datetimepicker();
          var new_input = "<div class='row'>    <div class='col-md-6'>  <div class='form-group'>        <label class='control-label'>Start Time</label>     <div class='input-group date' name='dtp"   new_chq_no   "s' id='datetimepicker"   new_chq_no   "s'>     <input type='text' class='form-control' />          <span class='input-group-addon'>        <span class='glyphicon glyphicon-calendar'>  </span>    </span> </div>  </div>              </div>      <div class='col-md-6'>                 <div class='form-group'>                   <label class='control-label'>End Time</label>   <div class='input-group date' name='dtp"   new_chq_no   "e' id='datetimepicker"   new_chq_no   "e'>                    <input type='text' class='form-control' />          <span class='input-group-addon'>    <span class='glyphicon glyphicon-calendar'></span>  </span>  </div>                   </div>               </div>  </div>";
        
          $('#new_chq').append(new_input);
          $('#total_chq').val(new_chq_no);
        }

    function remove() {
          var last_chq_no = $('#total_chq').val();

          if (last_chq_no > 1) {
            $('#new_'   last_chq_no).remove();
            $('#total_chq').val(last_chq_no - 1);
          }
        }
</script>

</head>
<body>

<div class='container'>
<div class='panel panel-primary'>
  <div class='panel-heading'>Enter Your Time</div>
  <div class='panel-body'>
  <div id='new_chq'>
     <div class='row'>
        <div class='col-md-6'>
           <div class='form-group'>
              <label class='control-label'>Start Time</label>
              <div class='input-group date' name='dtp0s' id='datetimepicker0s'>
                 <input type='text' class='form-control' />
                 <span class='input-group-addon'>
                 <span class='glyphicon glyphicon-calendar'></span>
                 </span>
              </div>
           </div>
        </div>
        <div class='col-md-6'>
           <div class='form-group'>
              <label class='control-label'>End Time</label>
              <div class='input-group date' name='dtp0e' id='datetimepicker0e'>
                 <input type='text' class='form-control' />
                 <span class='input-group-addon'>
                 <span class='glyphicon glyphicon-calendar'></span>
                 </span>
              </div>
           </div>
        </div>
     </div>
     </div>
     <input type='hidden' value='1' id='total_chq'>
     <button class='add'>Add Time</button>
             
     <br></br>
     <input type='submit' class='btn btn-primary' value='Submit'>

</div>
</div>
    
</body>
</html>

CodePudding user response：

You need to initialize the datepicker() after it is appended to the page, currently when you attempt to initialize it the selector does not find anything.

modified fiddle

original

function add() {
                
              var new_chq_no = parseInt($('#total_chq').val())   1;
              $("#datetimepicker"   new_chq_no   "s").datetimepicker();
              $("#datetimepicker"   new_chq_no   "e").datetimepicker();
              var new_input = "<div class='row'>    <div class='col-md-6'>  <div class='form-group'>        <label class='control-label'>Start Time</label>     <div class='input-group date' name='dtp"   new_chq_no   "s' id='datetimepicker"   new_chq_no   "s'>     <input type='text' class='form-control' />          <span class='input-group-addon'>        <span class='glyphicon glyphicon-calendar'>  </span>    </span> </div>  </div>              </div>      <div class='col-md-6'>                 <div class='form-group'>                   <label class='control-label'>End Time</label>   <div class='input-group date' name='dtp"   new_chq_no   "e' id='datetimepicker"   new_chq_no   "e'>                    <input type='text' class='form-control' />          <span class='input-group-addon'>    <span class='glyphicon glyphicon-calendar'></span>  </span>  </div>                   </div>               </div>  </div>";
            
              $('#new_chq').append(new_input);
              $('#total_chq').val(new_chq_no);
            }

modified

function add() {
                
              var new_chq_no = parseInt($('#total_chq').val())   1;
              var new_input = "<div class='row'>    <div class='col-md-6'>  <div class='form-group'>        <label class='control-label'>Start Time</label>     <div class='input-group date' name='dtp"   new_chq_no   "s' id='datetimepicker"   new_chq_no   "s'>     <input type='text' class='form-control' />          <span class='input-group-addon'>        <span class='glyphicon glyphicon-calendar'>  </span>    </span> </div>  </div>              </div>      <div class='col-md-6'>                 <div class='form-group'>                   <label class='control-label'>End Time</label>   <div class='input-group date' name='dtp"   new_chq_no   "e' id='datetimepicker"   new_chq_no   "e'>                    <input type='text' class='form-control' />          <span class='input-group-addon'>    <span class='glyphicon glyphicon-calendar'></span>  </span>  </div>                   </div>               </div>  </div>";
            
              $('#new_chq').append(new_input);
              $('#total_chq').val(new_chq_no);

              $("#datetimepicker"   new_chq_no   "s").datetimepicker();
              $("#datetimepicker"   new_chq_no   "e").datetimepicker();
            }