how to change button in every form-group

Question

I've created two form-groups:

I need to click on each button in every group and change it's button style (from grey to green and vice versa). But when I click on a button, all the buttns become grey except that one green that was pressed. I need to change button in every form-group. Please, help!

 $('.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> 

Here is a link to my codepen: https://codepen.io/ksena19/pen/MqRZZK

Answer 1

If I understood correctly you just need to swap states. Since there are only two, this might work for you.

Note that this doesn't check for current state. If you click an active button, it will still toggle.

 $('.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 2

jQuery: $('.btn').click(function() {...} checks all buttons that have .btn class. You can to use IDs instead of classes.

<button id="btn1" ... >

and then $("#btn1").click()...

Answer 3

You try to add a class on only one button, identify by $this in JS code. But you need to change all buttons classes, so you can do it easily like this :

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');

    }
});