I have set up two separate form-groups:
My goal is to click on each button within each group and toggle its style from grey to green, and vice versa. However, when I click on a button, all buttons within the group turn grey except for the one that was clicked, which turns green. I want this button toggling functionality to occur in every form-group. Can someone please assist me with this?
$('.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">Have you changed your last name?</label>
<div class="btns">
<button type="button" class="btn">Yes</button>
<button type="button" class="btn btn-success">No</button>
</div>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<div class="btns">
<button type="button" class="btn btn-success">Male</button>
<button type="button" class="btn">Female</button>
</div>
</div>Check out my codepen here: https://codepen.io/ksena19/pen/MqRZZK