如何通过按钮复制单张MCQ卡片内的对象 避免新增选项同步到所有卡片

你代码中新增选项会同步添加到所有卡片的原因是选择器没有限制作用范围：appendTo(".radioListItemView")会匹配页面内所有卡片的选项容器，导致克隆的选项被插入到每一张卡片里。

1. 修正点击添加选项的逻辑 #

$(".TextInputSimpleInputPlaceholder").on("click", function () {
    // 定位当前点击位置所属的卡片容器
    const currentCard = $(this).closest(".questionBodyRadioBody");
    // 仅从当前卡片克隆第一个选项
    const clone = currentCard.find(".radioListItemPrimaryContent:first").clone(true);
    clone.attr("class", "radioListItemPrimaryContent");
    // 仅插入到当前卡片的选项列表中
    clone.appendTo(currentCard.find(".radioListItemView"));
});

2. 优化卡片克隆函数 #

原克隆函数里的全局选择器逻辑也存在范围问题，优化后代码如下：

function cloneQuestion() {
    const originalQuestion = document.querySelector(".questions");
    const clonedQuestion = originalQuestion.cloneNode(true);
    clonedQuestion.querySelector(".questionMainTextArea").value = "Untitled Question";
    const addBtn = document.querySelector(".addQuestionBtnRow");
    addBtn.parentNode.insertBefore(clonedQuestion, addBtn);
}

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