Bootstrap Datetimepicker not working in collapse

Question

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.

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

<script>
    var id = 0;
    function example_append() {
    id++;
    $(".newTicket").prepend("<li>" + 
    "<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Name'/>" + "</div>" + 
    "<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Quantity'/>" + "</div>" + 
    "<div class='col-md-2'>" + "<input type='text' class='form-cantrol' placeholder='Price'/>" + "</div>" + 
    "<div class='col-md-2'>" + "<a href='#" + id + "' alt='' data-toggle='collapse' aria-expanded='false'><img src='image/2x_web/ic_settings_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" + 
    "<div class='col-md-2'>" + "<a href='javascript:void(0);' class='remove'><img src='image/2x_web/ic_delete_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" + 
    "</li>" +

    "<div class='collapse' id='" + id + "'>" +
      "<div class='well'>" +

        "<label>Description</label>" + "<input type='text' class='form-cantrol' placeholder='Enter a Description'/>" +

        "<div class='form-group'>" +
            "<div class='row'>"+
              "<div class='col-md-2'>"+
                "<label for='datetimepicker3'>Sales Start</label>"+
              "</div>"+
             "<div class='col-md-5'>"+
                "<div class='input-group date' id='datetimepicker3'>"+
                  "<input type='text' class='form-cantrol' />"+
                    "<span class='input-group-addon'>"+
                        "<span class='glyphicon glyphicon-calendar'></span>"+
                    "</span>"+
                "</div>"+
              "</div>"+
            "</div>" +
          "</div>" +

          "<div class='form-group'>" +
            "<div class='row'>"+
              "<div class='col-md-2'>"+
                "<label for='datetimepicker4'>Sales End</label>"+
              "</div>"+
             "<div class='col-md-5'>"+
                "<div class='input-group date' id='datetimepicker4'>"+
                  "<input type='text' class='form-cantrol' />"+
                    "<span class='input-group-addon'>"+
                        "<span class='glyphicon glyphicon-calendar'></span>"+
                    "</span>"+
                "</div>"+
              "</div>"+
            "</div>" +
          "</div>" +

        "<label>Minimum to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter the minimum'/>" +
        "<label>Maximun to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter that maximum'/>" +
      "</div>" +
    "</div>");
 }      
    $(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();
    });
</script>


    <script type="text/javascript">
        $(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);
            });
        });
    </script>

Answer 1

Maybe the problem is that onclick is never triggered.

Change

$(document).on("click", "input-group-addon", function () {

to

$(document).on("click", ".input-group-addon", function () {