unselected elements also getting highlighted why? [closed]

If I click the correct answer that correct answer only should be change to green . But in my code if I click the correct answer all the answers are getting green color. my class set_correct is applied to the all the answers

<div class="container">
<div class="button_port">
<input type="button"  id="btnid" class="pevcls" value="Previous Question" onclick="Prevfn()">
<input type="button" id="btnidnt" class="nextcls" value="Next Question" onclick="Nextfn()">
</div>
<div class="content_box">
<div id="question">
</div>
<div id="answer_button">
</div>
</div>
</div>



var i=1;
var questionpos=document.querySelector(".content_box");
var getquestion=document.getElementById("question");
var answersbutton=document.getElementById("answer_button");
function Prevfn()
{
    if(i==1)
    {
        document.getElementById("btnid").disabled=true;
        alert("Dont have the previous one");
        document.getElementById("btnidnt").disabled=false;
    }
    else{
        i--;
        setquestion();
    }
    
}
function Nextfn()
{
    
    if(i==5)
    {
        var ind=document.getElementById("btnidnt").disabled=true;
        
        document.getElementById("btnid").disabled=false;
        
        
    }
    else{
    i++;
    setquestion();
    }
    
   
}
var allAnswerButtons = [];

function setquestion(question)
{
var questionsvari=questions[i].question;
getquestion.innerHTML=questions[i].question;
allAnswerButtons.forEach(abutton => abutton.remove());
allAnswerButtons = [];
questions[i].Answers.forEach(answer=>
    {
        
        const button=document.createElement("button");
        button.classList.add('Ans_btn');
        
        button.innerText=answer.text;;
        if(answer.correct)
        {
        button.dataset.correct=answer.correct;  
        }
        
        button.addEventListener('click', selectanswer);
        answersbutton.appendChild(button);
        allAnswerButtons.push(button)
        
        
    }
    )
    
}
    function selectanswer(e)
    {
        var sal_answer=e.target;
        var tof_value=sal_answer.dataset.correct;
        
        Array.from(answersbutton.children).forEach(function(button)
        {
         
          setStatusClass(button,tof_value);
        
        }
        )
    }
    
    function setStatusClass(element,correct)
        
    {
        console.log(element);
        if(correct)
        {
         alert(correct);
        clearstatusclass(element);
        element.classList.add('set_correct');   
        }
        else
        {
        element.classList.add('set_false'); 
        }
    }
    

    function clearstatusclass(element)
    {
        element.classList.remove('set_correct');
        element.classList.remove('set_false');  
    }

const questions=[
{
    question:"How many factors do a prime number have?",
    Answers:[{text:'1 and the number itself',correct:'true'},{text:'2 and the 4',correct:'false'},{text:'3 and 6',correct:'false'},{text:'4 and 8',correct:'false'}]
},
{
    question:"What type of term 2x+7y is?",
    Answers:[{text:'234',correct:'true'},{text:'Binomial',correct:'false'},{text:'132',correct:'false'},{text:'222',correct:'false'}]
},
{
    question:"What is the percentage of 2:5?",
    Answers:[{text:'JavaScript',correct:'false'},{text:'40%',correct:'true'},{text:'JavaSql',correct:'false'}]
},
{
    question:"Which food contains lactobacillus?",
    Answers:[{text:'Curd',correct:'true'},{text:'Jojeshe',correct:'false'},{text:'JavaSql',correct:'false'},{text:'JavaSql',correct:'false'}]
},
{
    question:"What is the national game of Bangladesh?",
    Answers:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
},
{
    question:"What is the national game of Bangladesh?",
    Answers:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
}
];

here is my Full code..

https://codepen.io/pavisaran/pen/wvgQaew

I don’t know where I did my mistake..

Thanks in Advance

Answer

You are creating the answer buttons every time you switch the question but not removing them.

Add a variable:

var allAnswerButtons = [];

Then when you create the answer buttons, add every button to the array:

function setquestion(question) {

 // YOUR CODE

 questions[i].Answers.forEach(answer => {

  const button=document.createElement("button");

  // YOUR CODE

  // Add button to array:
  allAnswerButtons.push(button);

 });

}

So all current answer buttons are stored in the array. Then remove the buttons before creating the new ones like so:

function setquestion(question) {

 // YOUR CODE

 // Remove all buttons
 allAnswerButtons.forEach(abutton => abutton.remove());
 // Clear array
 allAnswerButtons = [];
 questions[i].Answers.forEach(answer => {

  // YOUR CODE

 });

}