jQuery - Button CSS Class Reset after 2 Clicks

Question

On button first click, it should apply .btn-1 class, second click .btn-2 class and on Third click it should clear the .btn-1 and .btn-2 classes... Till here, I am able to achieve this.

But If I click on the same button again, above functionality is not repeating.

FIDDLE

HTML

<button class="dealbutton">Hello</button

jQuery

$(document).ready(function(){
    $(".dealbutton").one("click", dealbuttonfn);
    function dealbuttonfn() {
        $(".dealbutton").addClass("btn-1");
        $(".dealbutton").one("click", function(){
            $(".dealbutton").removeClass("btn-1");
            $(".dealbutton").addClass("btn-2");
            $(".dealbutton").one("click", function(){
                $(".dealbutton").removeClass("btn-2");
            });
        });
}});

CSS

.dealbutton{height:200px;width:200px;background:#efefef;border:1px solid #aaa;color:#000;cursor:pointer;}
.dealbutton:focus{outline:none;}
.dealbutton.btn-1{background:#222;color:#fff;}
.dealbutton.btn-2{background:#444;color:#fff;}

Answer 1

you can use another valuable to loop on your classes my code :-

$(document).ready(function(){
    var i=0;
    $(".dealbutton").on("click", dealbuttonfn);
    function dealbuttonfn() {
        $(".dealbutton").removeClass("btn-"+i);
        i++;
        if(i>3)
            i=1;
        $(".dealbutton").addClass("btn-"+i);        
        
       
    }
});

.dealbutton{height:200px;width:200px;background:#efefef;border:1px solid #aaa;color:#000;cursor:pointer;}
.dealbutton:focus{outline:none;}
.dealbutton.btn-1{background:#222;color:#fff;}
.dealbutton.btn-2{background:#444;color:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="dealbutton">Hello</button>