jquery - プッシュボタンが正しく機能しない

Question

「1」ボタンがオンの場合は「2」ボタンをオフにし、「2」ボタンがオンの場合は「1」ボタンをオフにします。

しかし、現時点では、「2」ボタンをオンにしてから「1」ボタンをオンにすると、「1」ボタンがオンになり、「2」ボタンがオフになるため、うまく機能します。しかし、「2」ボタンをもう一度オンにしようとすると、オンにならず、オフのままで、ボタン「1」がオンのままになります。なぜこれが起こっているのか誰にも分かりますか？

以下はコードです：

function btnclick(btn)
{

$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");

    if ($("#answer1").hasClass('answerBtnsOn')) {
        $("#answer2").removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($("#answer2").hasClass('answerBtnsOn')) {
        $("#answer1").removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    return false;
}

以下は、1 ボタンと 2 ボタンの両方の html です。

1 ボタン:

<input class="answerBtns answers answerBtnsOff"   id="answer1"  type="button"   value="1"   onclick="btnclick(this);"/>

2 ボタン:

<input class="answerBtns answers answerBtnsOff"    id="answer2"         type="button"   value="2"       onclick="btnclick(this);"/>