Javascript时间选择器在动态表中不工作。如何解决这个问题？

我有一个动态表，可以在点击按钮时添加行。我正在使用Append函数添加任意多的行。所以问题是当我想在jquery追加中添加javascript时间选择器时。Javascript时间选择器不在动态表中工作，但在该表之外工作

这是我的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();
    });


});

$（'.timepicker'）.timepicker（）；
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-36251023-1']）；
_gaq.push（[''u setDomainName'，'jqueryscript.net']）；
_gaq.push（[''u trackPageview']）；
（功能（）{
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）；
})();
$（文档）.ready（函数（）{
var i=1；
//$（'#添加'）。单击（函数（）{
$（文档）。在（'单击'，'添加'，函数（）上）{
i++；
$（“#动态_字段”）.append（'
多达特尼·拉多维
日本广播电台
阿格里科尔
洛卡奇
X
');
$（'.timepicker'）.timepicker（）；
});
});

页面上不能有多个ID相同的元素。您需要初始化附加的计时器。我已将ID更改为class，但如何初始化计时器？附加后，调用

$（'.timepicker'）。timepicker（）

再次。好的，现在它在动态表中工作。但我希望每个字段都是唯一的。这一次显示在所有字段上。请参见图。