Javascript行添加导致Javascript日历表单元素不工作

我有一个表，其中有多个列，当按下一个按钮时，它会使用javascript添加另一行。以下是javascript代码：

<script type="text/javascript" >

        function displayResult()
        {
        var table=document.getElementById("expensesTable");
        var row=table.insertRow(1);
        var cell1=row.insertCell(0);
        var cell2=row.insertCell(1);
        cell1.innerHTML="<input size='10' id='datepick' name='from[]' style='padding:2px;'/>";
        cell2.innerHTML="<select name='billable[]'><option value='No'>No</option><option value='Yes'>Yes</option></select>";
        }

</script>

在添加的javascript行中，有一个日历也使用javascript运行。这是表单字段：

<input size='10' id='datepick' name='from[]' style='padding:2px;'/>

这是javascript：

<script type="text/javascript">
        new datepickr('datepick', {
            'dateFormat': 'Y-m-d'
        })
</script>

新建日期选择器（'datepick'{
“日期格式”：“Y-m-d”
})

第一排可以。但是，当我添加更多行时，它就不起作用了。我知道它不起作用的原因，因为它添加了id为datepick的表单项，该id与之前的相同。如果我将其命名为datepick2，并使用上面的javascript和datepick2，那么它就会工作。我只是不知道如何增加id和javascript以使其在多行上工作

---

非常感谢您的帮助。

我将计算行数并将其用作id后缀：

JS行计数器：

var nRows = table.getElementsByTagName('tr').length;

var nRows = $('#expensesTable').children().length;

JQuery行计数器：

var nRows = table.getElementsByTagName('tr').length;

var nRows = $('#expensesTable').children().length;

然后相应地修改id：

cell1.innerHTML="<input size='10' id='datepick"+nRows +"' name='from[]' style='padding:2px;'/>";

cell1.innerHTML=“”；