如何遍历ID重复的动态生成按钮 按需创建对应取值的input输入框

核心逻辑是先统计所有按钮ID的出现频次，再根据统计结果生成对应输入框，避免重复ID对应的冗余输入框：

1. 先用公共类名选中所有目标按钮，遍历统计每个ID的出现次数
2. 遍历统计结果，为每个唯一ID生成对应输入框，value为该ID的出现次数

$("#btn-save").click(function () {
    // 用于统计每个按钮ID的出现次数
    const idCountMap = {};
    // 按钮公共类名为btn-add-vehicle-item，用类选择器选中所有按钮
    $(".btn-add-vehicle-item").each(function () {
        const btnId = $(this).attr("id");
        // 统计ID出现次数
        idCountMap[btnId] = idCountMap[btnId] ? idCountMap[btnId] + 1 : 1;
    });

    let count = 0;
    // 遍历统计结果生成输入框
    for (const [vehicleId, soldNum] of Object.entries(idCountMap)) {
        // 可根据业务需要把车辆ID存入输入框属性，适配后端字段绑定规则
        $(`<input class='${btn-class}' value='${soldNum}' name='VehicleInvoice[${count}].VehicleSold' data-vehicle-id='${vehicleId}' type='hidden' />`).insertAfter('#main_div');
        count++;
    }
});

适配说明 #

• 全程不需要修改现有按钮的ID结构，符合不能改动现有代码的要求
• 生成的每个输入框对应唯一的车辆ID，value存储对应ID的销售数量，刚好匹配关联表新增的Quantity Sold字段，可直接解决EF Core因重复主键抛出的实体跟踪错误。

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