添加新的动态无线电输入时脸颊无线电出现问题

Question

我对这段代码有疑问。添加新答案时，单选框与第一个答案相比没有变化。

   function addAnswerInputGroup(questionIndex) {
            // Find the wrapper div for answer input groups within the specific question card
            var answerInputGroupWrapper = document.querySelector(`#questionCard${questionIndex} .answer-input-groups`);

            // Generate a unique ID for the new answer input group
            var answerInputId = "answerInput" + (answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length + 1);

            // Create the new answer input group HTML
            var newAnswerInputGroup = `
                <div class="input-group mb-3" id="${answerInputId}">
                    <span class="input-group-text"><input type="radio" aria-label="Radio for correct answer" name="questions[${questionIndex}][correct_answer]" value="${answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length}"></span>
                    <span class="input-group-text"><input id="multiplefileupload" type="file" accept=".jpg,.gif,.png" /></span>
                    <input type="text" class="form-control" name="questions[${questionIndex}][answers][]" placeholder="Answer ${answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length + 1}">
                </div>
            `;

            // Append the new answer input group HTML to the wrapper div
            answerInputGroupWrapper.insertAdjacentHTML('beforeend', newAnswerInputGroup);
        }

<div class="card" id="questionCard1">

    <div class="card-body">


        <h3 class="fs5">A</h3>
        <div class="answer-input-groups">
            <div class="input-group mb-3">
                <span class="input-group-text"><input type="radio" aria-label="Radio for correct answer" name="questions[0][correct_answer]" value="0"></span>
                <span class="input-group-text"><input id="multiplefileupload" type="file" accept=".jpg,.gif,.png"></span>
                <input type="text" class="form-control" name="questions[0][answers][]" placeholder="Answer 1">
            </div>
        </div>

        <button type="button" class="btn btn-primary" onclick="addAnswerInputGroup(1)">Add Answer</button>
    </div>
</div>

<script>
</script>

为了使问题出现，请添加新问题，选择第一个问题，然后更改第二个问题的选择

Answer 1

问题在于单选按钮名称，它必须是唯一的才能修复您需要生成随机名称

function addAnswerInputGroup(questionIndex) {
    // Find the wrapper div for answer input groups within the specific question card
    var answerInputGroupWrapper = document.querySelector(`#questionCard${questionIndex} .answer-input-groups`);

    // Generate a unique ID for the new answer input group
    var answerInputId = "answerInput" + (answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length + 1);

    // Generate a unique name for the radio button group
    var radioGroupName = `questions[${questionIndex}][correct_answer_${answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length}]`;

    // Create the new answer input group HTML
    var newAnswerInputGroup = `
        <div class="input-group mb-3" id="${answerInputId}">
            <span class="input-group-text"><input type="radio" aria-label="Radio for correct answer" name="${radioGroupName}" value="${answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length}"></span>
            <span class="input-group-text"><input id="multiplefileupload" type="file" accept=".jpg,.gif,.png" /></span>
            <input type="text" class="form-control" name="questions[${questionIndex}][answers][]" placeholder="Answer ${answerInputGroupWrapper.querySelectorAll('.input-group.mb-3').length + 1}">
        </div>
    `;

    // Append the new answer input group HTML to the wrapper div
    answerInputGroupWrapper.insertAdjacentHTML('beforeend', newAnswerInputGroup);
}