Проблема с изменением html-кода кнопки при нажатии с помощью jquery

У меня есть кнопка в html:

<button class = "addbtn"><i class = "fas fa-plus-circle"></i></button>

Я хочу изменить html-код кнопки (значок) при нажатии. Новый HTML-код:

<button class = "addbtn"><i class = "fas fa-times-circle"></i></button>

И я хочу переключаться на другой значок каждый раз, когда я нажимаю на кнопку. Поэтому я использовал этот фрагмент кода:

$(document).ready(function(){
        $(".addbtn").click(function(){
            var flag = true ;
            if (flag){
                $(".addbtn").html("<button class='addbtn'><i class='fas fa-times-circle'></i></button>");
                $(".add").animate({height:'500'});
                flag = false ;
            } else {
                $(".addbtn").html("<button class='addbtn'><i class='fas fa-plus-circle'></i></button>");
                $(".add").height(60);
                    flag = true ;
                }
        });
    });

Но это не изменяет предыдущий класс html «addbtn», он добавит еще один класс «addbtn» в качестве дочернего элемента предыдущего класса.

Как я могу просто изменить текущий html-код, не добавляя новый класс?