Problem with cheek radio when adding new dynamic radio input

I have a problem with this code. The radio box has not changed from the first answer when add new answers.

   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>

In order for the problem to appear, add new questions, select the first question, and change the selection for the second question