jQueryでセルを押下したらクラスを変更

jQueryでセルを押下したらクラスを変更して、
適用cssの変更をして、色を変えたいです。

初心者で恐縮なのですが、
青がついて消えて、赤がついて消えてで黄とかが出てきません。
ご助言頂ければ幸いで御座います。

jQuery
1    $('.cell').on('click', function () {
2        var status = $(this).attr('value');
3        switch (parseInt(status)) {
4            case 0 :
5                if ($(this).hasClass("cc-bg-red")) {
6                    $(this).removeClass('cc-bg-red');
7                }
8                $(this).addClass('cc-bg-light-blue');
9                $(this).attr('value', parseInt(status) + 1);
10                break;
11            case 1 :
12                if ($(this).hasClass("cc-bg-light-blue")) {
13                    $(this).removeClass('cc-bg-light-blue');
14                }
15                $(this).addClass('cc-bg-yellow');
16                $(this).attr('value', parseInt(status) + 1);
17                break;
18            case 2 :
19                if ($(this).hasClass("cc-bg-yellow")) {
20                    $(this).removeClass('cc-bg-yellow');
21                }
22                $(this).addClass('cc-bg-red');
23                $(this).attr('value', parseInt(status) + 1);
24                break;
25            case 3 :
26                if ($(this).hasClass("cc-bg-red")) {
27                    $(this).removeClass('cc-bg-red');
28                }
29                $(this).attr('value', 0);
30                break;
31            default :
32                ;
33        }
34    });