在<field>中的<div>内部下拉，而重复不起作用</fieldset> </div>

Question

我有一段代码可以让我复制div = tableOfTables，但是当我复制时，我可以使整个字段集id =＆＃34; group_1＆＃34;与唯一ID重复。 当我保留

时会出现问题

<select>
    ...code...
</select>

阻止，它不允许复制字段集。 是否违反CSS规则将一个下拉列表放在一个字段集中，这需要重复？

<form>
    <fieldset id="group_1">
        <legend>Group# 1</legend>Duplicate text
        <div id="tableOfTables" class="formfield">
            <table id="dataTableInner">Group# from table</table>
            <tr>
                <td>hi</td>
                <td>
                <select>
                    <option value="item1">Equals</option>
                    <option value="item2">Less Than</option>
                    <option value="item3">Greater Than</option>
                </select>
                </td>
            </tr>
        </div>
    </fieldset>
</form>

$('#add_one_more_group').click(function (event) {

    // Clone the first fieldset
    var item = $('fieldset[id^="group_"]:first').clone();

    // Search for the greatest existing fieldset ID
    var max_index = 0;
    $('form').children('fieldset[id^="group_"]').each(function () {

        var pattern = new RegExp("^group_([0-9]*)$");
        var matchArray = pattern.exec($(this).attr('id'));
        if (matchArray !== null && matchArray.length == 2) {
            max_index = Math.max(max_index, matchArray[1]);
        }
    });

我可以看到下拉选项在字段集中正常工作，但整个字段集不能重复。

这是 Fiddle 。