Bootstrap timepicker selects only the first timepicker element

Question

I have a form where a user can add dynamic bootstrap timepicker fields.

I'm using Bootstrap timepicker (https://github.com/eternicode/bootstrap-datepicker) for timepicker input fields that will be dynamically generated

The problem is, when clicking on any datepicker element (except the first one), all the changes happen to the first one only.

Here is the JSFIDDLE

The HTML part of my code is:

<div class="row multi-field-wrapper">
    <div class="multi-fields">
        <div class="multi-field">
            <div class="form-group col-xs-12 col-sm-4">
                <div class="input-group">
                    <input type="text" name="ticket-price" maxlength="5" class="form-control" placeholder="FREE" >
                    <span class="input-group-btn">
                        <button class="btn btn-default add-field" type="button">+</button>
                    </span>
                    <span class="input-group-btn">
                        <button class="btn btn-default remove-field" type="button">-</button>
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-xs-6 col-sm-3">
                    <label>Start Date</label>
                    <input type="text" name="tstart-date" class="form-control tstart-date-picker" placeholder="">
                </div>

            </div>
        </div>
    </div>

</div>

Answer 1

The problem is that you clone DOM elements with event handlers attached by jQuery. It causes troubles when you try to select date in new input, because events bound by datepicker somehow mixed up with original on from the first input.

The fix is pretty simple: clone without true argument, and also use delegated click event for adding new rows. The rest doesn't change:

$(this).on('click', '.add-field', function (e) {
    $('.multi-field:first-child', $wrapper).clone().appendTo($wrapper);
    $('.multi-field:last-child').find('input[name="tstart-date"]').val('');

    $('.multi-field:last .tstart-date-picker').datepicker({
        autoclose: true,
        format: 'dd-M-yyyy',
        todayHighlight: true,
    });
});

Demo: http://jsfiddle.net/z2j6u8ro/2/