I have a login form with some input methods like drop downs, blank fields. My client needs a feature that select yes or no switch like this. 

[![enter image description here](https://i.stack.imgur.com/FidUS.png)](https://i.stack.imgur.com/FidUS.png)

So I used jQuery add/remove functions when click. 

HTML: 

```
<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch switch1 active"> <span class="goods">Yes</span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-switch switch1"><span class="services">No</span>
        </button>
      </div>
    </div>
  </div>
</div>

```

CSS:

```
.switch1.active{
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}

```

Here is a working link for [jsfiddle](https://jsfiddle.net/jayD2/jkLank8b/1/) But my problem is..

**In some pages, I need to add more yes or no fields like 5 or 6. So I need to repeat jquery script more time.** 

So looking for a best practice to do in this kind of situation.