title: Bootstrap Datetimepicker not working in collapse
body: <p>Im using the bootstrap3 linked datetimepickers within a bootsrap collapse javascript component. The problem is that the datetimepicker is not showing. Im not sure what is causing the issue because I have tried z-index as many others have recommended and it has not solved my issue.</p>
  
  <p>This is my script code. I am not very experienced with jQuery but I made this code to dynamically add rows to the form with collapsible views</p>
  
  <pre><code>&lt;script&gt;
      var id = 0;
      function example_append() {
      id++;
      $(".newTicket").prepend("&lt;li&gt;" + 
      "&lt;div class='col-md-3'&gt;" + "&lt;input type='text' class='form-cantrol' placeholder='Name'/&gt;" + "&lt;/div&gt;" + 
      "&lt;div class='col-md-3'&gt;" + "&lt;input type='text' class='form-cantrol' placeholder='Quantity'/&gt;" + "&lt;/div&gt;" + 
      "&lt;div class='col-md-2'&gt;" + "&lt;input type='text' class='form-cantrol' placeholder='Price'/&gt;" + "&lt;/div&gt;" + 
      "&lt;div class='col-md-2'&gt;" + "&lt;a href='#" + id + "' alt='' data-toggle='collapse' aria-expanded='false'&gt;&lt;img src='image/2x_web/ic_settings_black_36dp.png' alt='' style='width: 32px; height: 32px;'&gt;&lt;/a&gt;" + "&lt;/div&gt;" + 
      "&lt;div class='col-md-2'&gt;" + "&lt;a href='javascript:void(0);' class='remove'&gt;&lt;img src='image/2x_web/ic_delete_black_36dp.png' alt='' style='width: 32px; height: 32px;'&gt;&lt;/a&gt;" + "&lt;/div&gt;" + 
      "&lt;/li&gt;" +
  
      "&lt;div class='collapse' id='" + id + "'&gt;" +
        "&lt;div class='well'&gt;" +
  
          "&lt;label&gt;Description&lt;/label&gt;" + "&lt;input type='text' class='form-cantrol' placeholder='Enter a Description'/&gt;" +
  
          "&lt;div class='form-group'&gt;" +
              "&lt;div class='row'&gt;"+
                "&lt;div class='col-md-2'&gt;"+
                  "&lt;label for='datetimepicker3'&gt;Sales Start&lt;/label&gt;"+
                "&lt;/div&gt;"+
               "&lt;div class='col-md-5'&gt;"+
                  "&lt;div class='input-group date' id='datetimepicker3'&gt;"+
                    "&lt;input type='text' class='form-cantrol' /&gt;"+
                      "&lt;span class='input-group-addon'&gt;"+
                          "&lt;span class='glyphicon glyphicon-calendar'&gt;&lt;/span&gt;"+
                      "&lt;/span&gt;"+
                  "&lt;/div&gt;"+
                "&lt;/div&gt;"+
              "&lt;/div&gt;" +
            "&lt;/div&gt;" +
  
            "&lt;div class='form-group'&gt;" +
              "&lt;div class='row'&gt;"+
                "&lt;div class='col-md-2'&gt;"+
                  "&lt;label for='datetimepicker4'&gt;Sales End&lt;/label&gt;"+
                "&lt;/div&gt;"+
               "&lt;div class='col-md-5'&gt;"+
                  "&lt;div class='input-group date' id='datetimepicker4'&gt;"+
                    "&lt;input type='text' class='form-cantrol' /&gt;"+
                      "&lt;span class='input-group-addon'&gt;"+
                          "&lt;span class='glyphicon glyphicon-calendar'&gt;&lt;/span&gt;"+
                      "&lt;/span&gt;"+
                  "&lt;/div&gt;"+
                "&lt;/div&gt;"+
              "&lt;/div&gt;" +
            "&lt;/div&gt;" +
  
          "&lt;label&gt;Minimum to Buy&lt;/label&gt;" + "&lt;input type='text' class='form-cantrol' placeholder='Enter the minimum'/&gt;" +
          "&lt;label&gt;Maximun to Buy&lt;/label&gt;" + "&lt;input type='text' class='form-cantrol' placeholder='Enter that maximum'/&gt;" +
        "&lt;/div&gt;" +
      "&lt;/div&gt;");
   }      
      $(document).on("click", "input-group-addon", function () {
              $('#datetimepicker3').datetimepicker();
              $('#datetimepicker4').datetimepicker();
              $("#datetimepicker3").on("dp.change", function (e) {
                  $('#datetimepicker4').data("DateTimePicker").minDate(e.date);
              });
              $("#datetimepicker4").on("dp.change", function (e) {
                  $('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
              });
          });
  
      $(document).on("click", "a.remove", function () {
      $(this).closest('li').remove();
      });
  &lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
          $(function () {
              $('#datetimepicker3').datetimepicker();
              $('#datetimepicker4').datetimepicker();
              $("#datetimepicker3").on("dp.change", function (e) {
                  $('#datetimepicker4').data("DateTimePicker").minDate(e.date);
              });
              $("#datetimepicker4").on("dp.change", function (e) {
                  $('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
              });
          });
      &lt;/script&gt;
  </code></pre>