Javascript Time Picker не работает внутри динамической таблицы. Как это исправить?

Question

У меня есть динамическая таблица, которая добавляет строки по нажатию кнопки. Я использую функцию добавления, чтобы добавить строки столько, сколько я хочу. Так что проблема в том, когда я хочу добавить Javascript Time Picker внутри этого jquery-приложенияJavascript Time Picker не работает в динамической таблице, но он работает за пределами этой таблицы.

Это мой код Javascript:

$('.timepicker').timepicker();

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script');
     ga.type = 'text/javascript';
     ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(ga, s);
})();

$(document).ready(function () {
    var i = 1;
    //$('#add').click(function () {
      $(document).on('click', '#add', function() {
        i++;
        $('#dynamic_field').append('<tr id="row'+ i + '" style="text-align: center;">
    <td><input type="text" class="form-control name_list" name="ime[]"></td>
    <td><select class="form-control" name="operacija[]"><?php $sql = "SELECT nazivSrb FROM operacije ORDER BY nazivSrb ASC";$result = mysqli_query($con, $sql);while ($row = mysqli_fetch_array($result)) { ?><option value="<?php echo $row['
                    nazivSrb ']; ?>"><?php echo $row['
                    nazivSrb ']; ?></option><?php } ?><option value="Dodatni radovi">Dodatni radovi</option>
            <option value="Nije radio">Nije radio</option>
        </select></td>
    <td style="width: 500px;">
        <div class="row">
            <div class="col-lg-6"><input type="text" class="form-control timepicker"></div>
            <div class="col-lg-6"><input type="text" class="form-control timepicker"></div>
    </td>
    <td><input type="text" class="form-control name_list" name="pauza[]"></td>
    <td><select class="form-control" name="status[]">
            <option value="agrikol">Agrikol</option>
            <option value="ostali">Lokalci</option>
        </select></td>
    <td><button type="button" onclick="deleteRow(this)" name="remove" id="'+ i + '" class="btn btn-danger btn_remove">X</button></td>
</tr>');
$('.timepicker').timepicker();
    });


});