Problem with cheek radio when adding new dynamic radio input

April 27, 2024

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

>Solution :

They need to have same… name to be considered a group.

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[1][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>