I have two buttons: without background and green, I need them to change when i click on them (from green to that one with dashed border-bottom) [![enter image description here](https://i.stack.imgur.com/5d9W6.jpg)](https://i.stack.imgur.com/5d9W6.jpg)

Here is my html:

```
 <div class="btns">
                <button type="button" class="btn btn-success">Муж</button>
                <button type="button" class="btn btn-link btn-simple">Жен</button>
           </div>

```

I've written script just like this :

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

```

but it doesn't work.

and here is what I added to css file:

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

```

nothing else because these are bootstrap buttons.