I'm trying to add a class to an element using jQuery. If the user clicks on an element it adds a class, which I can do, but I want only 1 instance of that class to be active so if the user clicks on something else that class is then removed from the previous element and added to the current one.

<https://jsfiddle.net/gsuxjce2/3/>

```
<div class="row">
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
</div>

.col {
  width: 25%;
  float: left;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}

.added {
  background-color: blue;
}

 $('.box').click(function() {
        $(this).toggleClass('added');

    if ( $(this).hasClass('added'); ) {
                    $(this).removeClass('added');
    } else {
            $(this).toggleClass('added');
    }

 });

```