Как сделать универсальный переключатель?

Question

[Сергей Ивонов]

Привет Всем!

Есть вот такой переключатель кнопки. Да нет

$(".quest__answers button").on("click", function() {
        var btnBoy = $('.quest__answers button.yes');
        var btnGirl = $('.quest__answers button.not');
        if ($(btnBoy).hasClass('active')) {
            $(btnBoy).removeClass('active');
            $(btnGirl).addClass('active');
            return;
        } else if ($(btnGirl).hasClass('active')) {
            $(btnGirl).removeClass('active');
            $(btnBoy).addClass('active');
            return;
        }
        $(this).addClass('active');
    });

и вот html

<div class="quest__answers">
							<button class="yes">Да</button> 
							<button class="not">Нет</button>
						</div><!-- .quest__answers -->

Все нормально работает но когда дублировал html код то есть один скрипт на 2 html варианта кнопки и работает не корректно. То есть в одном выберешь а второй выберется на основе первого.

Как можно адаптироваь jquery код что бы она работала универсально? например для несколько кнопок?

Большое спасибо.

Answer 1

[Дима Паутов]

https://jsfiddle.net/aao8gjth/

Задача переключателей решается стилизованными input radio + label

Comments

[Stepanya]

Простите, но у Вас говнокод

[Дима Паутов]

Stepanya: Это не мой код, и не нужно умничать! Я сделал так, что бы код, предоставленный мне человеком начал работать так, как он задумывал. Задача оптимизации не стояла

Answer 2

[Иван]

var btnBoy = $('.quest__answers button.yes');
var btnGirl = $('.quest__answers button.not');

Ну так вы их ищите по классу, т.е. всех подходящих.
Используйте this.

Answer 3

[Ivan Bogachev]

Кажется вы пытаетесь изобрести radio button (codepen).