adding/removing classes with jquery in a web questionnaire

Question

I have a web questionnaire. Its a series of questions with a series of answers alternitives for each question. Each "answer alternative" is an asp input button. Whenever a user click a button, that button recives a new class and removes that same class from the other answer buttons of that question the user wishes to answer.
the class changes the style of the button so the user clearly sees his or hers choise of the given question.

the removing/adding of classes is done with javascript using jquery. Right now im using diffrent functions for each answer. Since there will be quite alot of question I feel that there might be a better way doing this. It would be nice if I had one global method/function or whatever its called, that just "looked" at the second class(my input buttons have two classes) of that given button, removed all the "active_vertical" from all other buttons that have the same second class as the button it "looked" at. Or some other solution. Im very new to javascript and jquery and havent much knowledge of programing in general so I have no idea how to do something like this. heres the jquery code:

$(function () {
        $(".car_insurance_type_button").click(function () {
            $(".car_insurance_type_button").removeClass("active_vertical");
            $(this).addClass("active_vertical");
        });
    });

    $(function () {
        $(".skadefria_ar_button").click(function () {
            $(".skadefria_ar_button").removeClass("active_vertical");
            $(this).addClass("active_vertical");
        });
    });

    $(function () {
        $(".under25_button").click(function () {
            $(".under25_button").removeClass("active_vertical");
            $(this).addClass("active_vertical");
        });
    }); 

heres the button:

<input id="Button2" class="button_vertical car_insurance_type_button" type="button" value="Halvår" /> 

And if there is a solution, would that have negative impact on performance since it has to do more(I think) with each click? If so it might be better just doing as I do it now.

Answer 1

let buttons have one more class 'answer_button':

<input id="Button1" class="answer_button button_vertical car_insurance_type_button" type="button" value="Halvår" /> 
<input id="Button2" class="answer_button button_vertical skadefria_ar_button" type="button" value="asdasda" /> 

so, i guess this will work:

$('.answer_button').each(function(index) {
    $('.answer_button').removeClass("button_vertical");
    $(this).addClass("button_vertical");
  });

Answer 2

You can use a different approach here, if all of your buttons are in a container, say like this:

<div class="question">
  <input class="button_vertical car_insurance_type_button" type="button" value="Halvår" /> 
  <input class="button_vertical car_insurance_type_button" type="button" value="Halvår2" />
</div>

You could use one lightweight handler like this:

$(function () {
  $(".question input[type=button]").live('click', function () {
    $(this).closest(".question").find(".active_vertical").removeClass("active_vertical");
    $(this).addClass("active_vertical");
  });
});