как изменить кнопку в каждой форме группы

Question

Я создал две группы форм:

Мне нужно нажать на каждую кнопку в каждой группе и изменить ее стиль (с серого на зеленый и наоборот).Но когда я нажимаю на кнопку, все кнопки становятся серыми, кроме той, которая была нажата.Мне нужно изменить кнопку в каждой форме группы.Пожалуйста, помогите!

$('.btn').click(function() {
  var $this = $(this);
  if ($this.parents('form-group').hasClass('btn-success')) {
    $this.removeClass('btn-success')
  } else if (!$this.hasClass('btn-success')) {
    $('.btn').removeClass('btn-success')
    $this.addClass('btn-success');

  }
});
$('this').parents('form-group').addClass()

.btn-success {
  color: #fff;
  background: green;
}

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="btns">Меняли фамилию?</label>
  <div class="btns">
    <button type="button" class="btn">Да</button>
    <button type="button" class="btn btn-success">Нет</button>
  </div>
</div>
<div class="form-group">
  <label for="btns">Пол</label>
  <div class="btns">
    <button type="button" class="btn btn-success">Муж</button>
    <button type="button" class="btn">Жен</button>
  </div>
</div>

Вот ссылка на мой кодовый блок: https://codepen.io/ksena19/pen/MqRZZK

Answer 1

Вы пытаетесь добавить класс только на одну кнопку, обозначьте $ this в коде JS.Но вам нужно изменить все классы кнопок, чтобы вы могли легко это сделать так:

https://codepen.io/benCat/pen/EeJMxO

$('.btn').click(function(){
    var button = $('button');
    if (button.hasClass('btn-success')) {
        button.removeClass('btn-success')
    } else if (!button.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        button.addClass('btn-success');

    }
});

Answer 2

Если я правильно понял, вам просто нужно поменять местами.Поскольку их всего два, это может сработать для вас.

Обратите внимание, что это не проверяет текущее состояние.Если вы нажмете активную кнопку, она все равно будет переключаться.

$('.btn').click(function() {
  $('.btn').toggleClass('btn-success');
});

.btn-success {
  color: #fff;
  background: green;
}

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="btns">Меняли фамилию?</label>
  <div class="btns">
    <button type="button" class="btn">Да</button>
    <button type="button" class="btn btn-success">Нет</button>
  </div>
</div>
<div class="form-group">
  <label for="btns">Пол</label>
  <div class="btns">
    <button type="button" class="btn btn-success">Муж</button>
    <button type="button" class="btn">Жен</button>
  </div>
</div>

Answer 3

jQuery: $('.btn').click(function() {...} проверяет все кнопки, имеющие класс .btn.Вы можете использовать идентификаторы вместо классов.

<button id="btn1" ... >

, а затем $("#btn1").click()...