JavaScript - How can I make it more dynamic?

Question

JavaScript

$("#answer_a_btn").click(function() {
  selectAnswer("#answer_a_btn");
  deselectAnswer("#answer_b_btn");
  deselectAnswer("#answer_c_btn");
  deselectAnswer("#answer_d_btn");
});

$("#answer_b_btn").click(function() {
  deselectAnswer("#answer_a_btn");
  selectAnswer("#answer_b_btn");
  deselectAnswer("#answer_c_btn");
  deselectAnswer("#answer_d_btn");
});
$("#answer_c_btn").click(function() {
  deselectAnswer("#answer_a_btn");
  deselectAnswer("#answer_b_btn");
  selectAnswer("#answer_c_btn");
  deselectAnswer("#answer_d_btn");
});
$("#answer_d_btn").click(function() {
  deselectAnswer("#answer_a_btn");
  deselectAnswer("#answer_b_btn");
  deselectAnswer("#answer_c_btn");
  selectAnswer("#answer_d_btn");
}); 

Because I have much more than 4 Button Answers, so how can I make it more dynamic?

function selectOnlyOneExamButton(examButtonId, examButtonsIds) {
   for(var i = 0; i < examButtonsIds.length; i++)
    {
        if(examButtonsIds[i] == examButtonId)
        {
            console.log("SELECTED ANSWER " + examButtonsIds[i]);
            selectAnswer(examButtonsIds[i]);
        }
        else {
            console.log("DESELECTED ANSWER " + examButtonsIds[i]);
            deselectAnswer(examButtonsIds[i]);
        }  
    }
};

de-/selectAnswer() only change the color of the current de-/selected button

I don't know why this isn't working.

He printed out the same button id everytime I clicked another button or the same button...

var examButtonsIds = [];
   var examButtonId = "";
   
   for(var i = 0; i < zwischenpruefungen[1].exams.length; i++)
    {
        currentExam = zwischenpruefungen[1].exams[i];
        console.log(i);
        if(i % 2 == 0)
        {
            examscreen.appendChild(row);
        }
        var p = document.createElement("p");
        p.className = "col-md-6";
        var button = document.createElement("button");
        button.id =  "exam-" + currentExam.season + "-" + currentExam.year + "-btn";
        button.className = "exam exam-btn btn btn-secondary btn-lg btn-block";
        examButtonId = button.getAttribute("id");
        
        button.addEventListener("click", function() {
            console.log("SELECT ONE EXAM BUTTON CLICKED");
            selectAnswer(this);
            $.each(".exam-btn").not(this).each(function() {
                deselectAnswer(this);
            });
        });
        var span = document.createElement("span");
        span.className = Object.keys(currentExam)[1];
        span.textContent = currentExam["season-de"] + " ";
        var span2 = document.createElement("span");
        span2.className = Object.keys(currentExam)[3];
        span2.textContent = currentExam.year;
        row.appendChild(p);
        p.appendChild(button);
        button.appendChild(span);
        button.appendChild(span2);
        examButtonsIds[i] = button.getAttribute("id");
    }

I do the following in my for-loop and the result is, that I get an error from jquery.min.js and the buttons keep in the clicked color if I clicked both.

Here are the new problem. I hope you can help me?

button.addEventListener("click", function() {
    selectAnswer(this);
    $(".answer-" + letter.toLowerCase() + "-btn").not(this).each(function() {
      deselectAnswer(this);
    });
    console.log(this.id);
});

button.addEventListener("click", function() {
    selectAnswer(this);
    $(".answer-a-btn").not(this).each(function() {
      deselectAnswer(this);
    });
    $(".answer-b-btn").not(this).each(function() {
        deselectAnswer(this);
    });
    $(".answer-c-btn").not(this).each(function() {
        deselectAnswer(this);
    });
      $(".answer-d-btn").not(this).each(function() {
        deselectAnswer(this);
    });
    $(".answer-e-btn").not(this).each(function() {
        deselectAnswer(this);
      });
    console.log(this.id);
});

I thought that it would work, but it doesn't, can anyone tell me why? I have a complex function that works, but I want it more easy....

button.addEventListener("click", function() {
    selectAnswer(this);
    var letterTmp = this.id.split('-')[3];
    $(".answer-" + letterTmp + "-btn").not(this).each(function() {
      deselectAnswer(this);
    });
    console.log(this.id);
});

I think this is the solution for me. :)

Answer 1

        button.addEventListener("click", function() {
        selectAnswer(this);
        $(".exam-btn").not(this).each(function() {
          deselectAnswer(this);
        });
        console.log(this.id);
    });

My Solution inspired by Barmar. :)

Answer 2

Give all the buttons the same class="answer_btn". Then you can do

$(".answer_btn").click(function() {
  select_answer(this);
  $(".answer_btn").not(this).each(function() {
    deselect_answer(this);
  });
});