クリックした要素に対してクラスの追加削除

前提・実現したいこと

クリックした要素（例えば001要素）に対してactiveクラスを追加し、
他の要素（例えば002要素）をクリックするとその要素に対してactiveクラスを追加し、
001要素からはactiveクラスが削除される。
ここまで上手く行きました。

発生している問題・エラーメッセージ

上記の前提は、divの共通のlistクラスをセレクタにして、
activeクラスを一度削除し、それからクリックした$(this)に対して、
activeクラスを追加して実現できました。

しかし一つ問題が起き、activeクラスがある要素に対してもう一度クリックすると、
activeクラスが削除されません。
理由は自分なりに考えると、list.removeClass('active')の後に、$(this).addClass('active')を実行しているためだと思いますが、この処理の順序を変えても、上手く行きません。

前提・実現したいことを維持しつつ、activeクラスを持つ要素に対してクリックするとクラスを削除するのはどうすれば良いでしょうか。

activeクラスは文字を赤色にするのみのクラスです。

現状の動作を確認しやすくするために、jsfiddleにコードをアップしていますので、
ご確認ください。（リンク先の上部にあるSaveはこちらのコードには影響はないので、ご活用くださいませ。）
https://jsfiddle.net/ululami/x8smfwbu/10/

よろしくお願いいたします。

該当のソースコード

javascript
1$(function() {
2	const list = $('.list');
3	list.on('click', function() {
4  	list.removeClass('active');
5  	$(this).addClass('active');
6  });
7});

html
1<div class="box">
2  <div class="list">
3    001
4  </div>
5  <div class="list">
6    002
7  </div>
8  <div class="list">
9    003
10  </div>
11</div>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6html,
7body,
8.box {
9  height: 100%;
10}
11
12.box {
13  display: flex;
14  align-items: center;
15  justify-content: center;
16  flex-direction: column;
17}
18
19.list {
20  font-size: 20px;
21  font-weight: bold;
22}
23
24.list:not(:last-child) {
25  margin-bottom: 10px;
26}
27
28.active {
29  color: red;
30}