jQuery嵌套动态输入问题：新增变体输入同步至旧变体的解决求助

你的问题核心是全局选择器导致操作影响所有变体，加上重复使用ID违反HTML规则，最终造成数据同步混乱。以下是修复方案：

关键问题分析 #

1. 重复使用#btnAdd、#category等ID，HTML中ID必须唯一，会导致事件绑定和DOM选择混乱。
2. 点击添加按钮时，用$('.dynamicAdd').append(...)会把新行添加到所有拥有dynamicAdd类的tbody中，而非当前点击的变体表格。
3. 所有变体没有独立容器，无法区分不同变体的DOM结构。

修复代码 #

$(document).ready(function(){
    // 全局计数器，用于生成唯一的变体标识
    let variantCounter = 0;

    // 生成变体选择器的函数
    function add_variant() {
        variantCounter++;
        return `
        <div class="variant-container" id="variant-${variantCounter}">
            <div class="row variantTitle">
                <div class="col">
                    <div class="form-group">
                        <label>Select Variant</label>
                        <select class="custom-select border-success variant" name="variant[${variantCounter}]">
                            <option value="">Select</option>
                            <?php echo fill_variant_box($conn); ?>
                        </select>
                    </div>
                </div>
            </div>
            ${add_input_field(variantCounter)}
        </div>
        `;
    }

    // 生成变体内部的表格，接受变体ID参数
    function add_input_field(variantId) {
        return `
        <table class="table table-bordered">
            <tr>
                <th>Category</th>
                <th>Item Name</th>
                <th>Quantity</th>
                <th>Button</th>
            </tr>
            <tbody class="dynamicAdd" data-variant="${variantId}">
                <tr>
                    <td>
                        <select class="custom-select category border-success" name="variant[${variantId}][items][0][category]">
                            <option value="-Select-">-Select-</option>
                            <?php echo fill_category_select_box($conn); ?>
                        </select>
                    </td>
                    <td>
                        <input class="form-control border-success name_items" name="variant[${variantId}][items][0][name]" autocomplete="off">
                    </td>
                    <td>
                        <input class="form-control quantity border-success" type="text" name="variant[${variantId}][items][0][quantity]">
                    </td>
                    <td>
                        <button type="button" class="btn btn-success btnAdd">Add</button>
                    </td>
                </tr>
            </tbody>
        </table>
        `;
    }

    // 生成新的表格行，接受当前变体的items计数
    function getAppendedRow(variantId, itemIndex) {
        return `
        <tr>
            <td>
                <select class="custom-select category border-success" name="variant[${variantId}][items][${itemIndex}][category]">
                    <option value="-Select-">-Select-</option>
                    <?php echo fill_category_select_box($conn); ?>
                </select>
            </td>
            <td>
                <input class="form-control border-success name_items" name="variant[${variantId}][items][${itemIndex}][name]" autocomplete="off">
            </td>
            <td>
                <input class="form-control quantity border-success" type="text" name="variant[${variantId}][items][${itemIndex}][quantity]">
            </td>
            <td>
                <button type="button" class="btn btn-danger btnRemove">Remove</button>
            </td>
        </tr>
        `;
    }

    // 初始化第一个变体
    $('#add-form').append(add_variant());
    addActionButtons();

    // 添加新变体的事件
    $(document).on('click','#addVar',function(){
        $('#testBtn').remove();
        $('#cancelBtn').remove();
        $('#add-form').append(add_variant());
        addActionButtons();
    });

    // 添加行的事件：仅操作当前变体的表格
    $(document).on('click', '.btnAdd',function(){
        const $tbody = $(this).closest('table').find('.dynamicAdd');
        const variantId = $tbody.data('variant');
        // 计算当前变体已有多少行，生成新的索引
        const itemIndex = $tbody.find('tr').length;
        $tbody.append(getAppendedRow(variantId, itemIndex));
    });

    // 移除行的事件
    $(document).on('click','.btnRemove', function(){
        $(this).closest('tr').remove();
        // 可选：移除后重新索引表单name，保证提交的数组连续
        const $tbody = $(this).closest('tbody');
        const variantId = $tbody.data('variant');
        $tbody.find('tr').each(function(index) {
            $(this).find('[name]').each(function() {
                const name = $(this).attr('name').replace(/items\[\d+\]/, `items[${index}]`);
                $(this).attr('name', name);
            });
        });
    });

    // 复用添加保存/取消按钮的函数
    function addActionButtons() {
        $('#testBtn').remove();
        $('#cancelBtn').remove();
        $('#add-form').append('<button type="button" class="btn addDonate" id="testBtn">Save</button>');
        $('#add-form').append('<button type="button" class="btn cancelBtn" id="cancelBtn">Cancel</button>');
    }
});

核心修改点 #

1. 独立容器：每个变体包裹在variant-container中，用variantCounter生成唯一ID，确保DOM结构隔离。
2. 唯一表单命名：表单name采用数组格式variant[${variantId}][items][${itemIndex}][xxx]，提交时能区分不同变体的不同条目，后端可直接解析为多维数组。
3. 上下文选择：点击.btnAdd时，通过$(this).closest('table').find('.dynamicAdd')定位当前变体的tbody，避免影响其他变体。
4. 移除重复ID：所有交互元素改用类（.btnAdd、.btnRemove），不再使用重复ID。
5. 行索引管理：添加新行时基于当前tbody的行数生成索引，移除行后重新整理索引，保证提交数据的连续性。

内容的提问来源于stack exchange，提问作者Rico Littawa