Listview在添加列表项Jquery Mobile时重复ID

我正在构建一个自定义Jquery移动列表，其中我有一个域列表（li），它几乎没有切换开关。

我正在动态创建翻转开关。创建时，分配了唯一的ID。我在创建时检查过，所有人都有唯一的ID。创建了一个翻转开关后，我将添加到列表项中。

刷新列表后，我可以看到与其他翻转框具有相同ID的翻转框。我在创建时进行了验证，结果很好。创建后，它的格式不正确。

我使用FoundationJS构建网格。

实现这一点的JavaScript代码是，

for(var currentIndex = 0; currentIndex < myArray.length ; currentIndex ++){
    var currentField =  myArray[currentIndex];
    $('#my-list').append('<li data-role="list-divider" class="my-list-by-domain">'+currentField.Name+'</li>');
    for(var domainCount = 0; domainCount < (currentField.UserGoals).length ; domainCount++) {
        var currentMyGoalField = (currentField.UserGoals)[domainCount];
        var myGoalsDataElement = $(".my-goals-content-template .my-goals-data-row").clone();
        var switchElement =  ('<fieldset><div data-role="fieldcontain">' +
            '<select class="my-goals-flip-switch" data-role="flipswitch" onchange="goalOnChange(' + currentMyGoalField.UserGoalId + ')" ' +
            'id="my-goals-toggle-' + currentMyGoalField.UserGoalId + '">' +
            '<option value="true">Yes</option>' +
            '<option value="false">No</option>' +
            '</select></div>' +
            '</fieldset>');
        $(".my-goals-label", myGoalsDataElement).text(currentMyGoalField.Name);
        $("#my-goals-complete-check").empty();
        $("#my-goals-complete-check").append(switchElement);
        $('#my-goal-list').append(myGoalsDataElement).enhanceWithin();
    }
}

相同的HTML容器是，

<div class="my-goals-content-template" style="display: none">
    <div class="row my-goals-data-row">
        <div class="small-9 medium-10 large-10 columns my-goals-label"></div>
        <div class=" small-3 medium-2 large-2 columns">
            <div id="my-goals-complete-check">
            </div>
        </div>
    </div>
</div>

有人能帮助我理解这一点吗。