changing the input class of a radio button dynamically with javascript

Question

I am trying to make a small question web app using javascript/html. what I am trying to do is, assign a class to each of the radio buttons for each question-i.e. all the radio buttons for question 1 will have an input class of "question1" and 2 will have a class of "question2" and so on.

Because I don't know how many questions I will have, I was wondering if there was a way to achieve this dynamically through javascript using element.classList.add and increment the value of the question by 1 each time. I have received a response using jquery, but I was wondering if there was also a way to achieve this using pure javascript.

After some research, I have tried accessing all the elements inside a form using "form.elements" however it does not seem to be working.

HTML:

<form name="quizForm">
  <div class="content">
    <div class="quiz">
      <p>Question 1</p>
      <input type="radio" name="answer" value="1">
      <input type="radio" name="answer" value="2">
      <input type="radio" name="answer" value="3">
    </div>

    <div class="quiz" style="display: none;">
      <p>Question 2</p>
      <input type="radio"  name="answer" value="1">
      <input type="radio"  name="answer" value="2">
      <input type="radio"  name="answer" value="3">
    </div>

    <div class="quiz" style="display: none;">
      <p>Question 3</p>
      <input type="radio" name="answer" value="1">
      <input type="radio" name="answer" value="2">
      <input type="radio" name="answer" value="3">
    </div>
</form>

Javascript:

//counting the index of the class
let ind =0;

//access the named elements within the form
let elements = form.elements;
for(i=0;i<elements.length;i++){
    element.classList.add(`quiz${ind+1}`)
}

Any information towards the right direction is greatly appreciated. Thank you.

Answer 1

I apologise for my initial question as I am realising that I have been unclear explaining some aspects of the issue that I was having. I managed to solve the problem. When I ask questions in the future, I will make sure I double check my code so that it is working. Posting an solution here for those who are interested and in the hopes that it will help someone.

What I did:

• make a variable that keeps a track of the class number (ind)
• using "querySelectorAll" I can select all the elements with the class "quiz"
• loop through the returned array with forEach, increment the "ind" variable
• select all the inputs that are inside each "quiz"
• the "quiz" loop through those inputs and add a class to the input elements

HTML:

     <div class="quiz">
     <p>Question 1</p>
     <input type="radio" name="answer" value="1">
     <input type="radio" name="answer" value="2">
     <input type="radio" name="answer" value="3">
     </div>

    <div class="quiz" style="display: none;">
    <p>Question 2</p>
    <input type="radio"  name="answer" value="1">
    <input type="radio"  name="answer" value="2">
    <input type="radio"  name="answer" value="3">
    </div>

    <div class="quiz" style="display: none;">
    <p>Question 3</p>
    <input type="radio" name="answer" value="1">
    <input type="radio" name="answer" value="2">
    <input type="radio" name="answer" value="3">
    </div>

Javascript:

const quizes = document.querySelectorAll('.quiz');
    //a variable to increment the classes
        let ind = 0;
    
    quizes.forEach(function(element){
        ind++;
        let inputs = element.querySelectorAll('input');
        inputs.forEach((input)=>{
            input.classList.add(`question${ind}`)
        })
    //to test on the console
        console.log(inputs)
    })

All the radio button inputs for question 1 have the same "question1" class.