如何在文本框中显示数字以跟踪打开的按钮数量

下面是只读文本框的代码：

<td>
<input type="text" name="numberAnswer" class="numberAnswerTxt answertxt" id="mainNumberAnswerTxt" onChange="getButtons()" readonly="readonly" >
</td>

以下是显示按钮A-G:的代码

<?php
    $a = range("A","G");
?>
<table id="answerswerSection">
    <tr>
<?php
    $i = 1;
    foreach($a as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type='"button'" onclick='"btnclick(this);'" value='"$val'" id='"answerswer".$val."'" name='"answerswer".$val."Name'" class='"answerswerBtns answers answerBtnsOff'">";      
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
?>
    </tr>
</table>

最后，下面是打开和关闭字母按钮的功能：

function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    if ($(btn).hasClass("answerswerBtnsOn")) {
        $(btn).removeClass("answerswerBtnsOn").addClass("answerswerBtnsOff");
        return false;
    }
    if ($(btn).hasClass("answerswerBtnsOff")) {
        $(btn).removeClass("answerswerBtnsOff").addClass("answerswerBtnsOn");
        return false;
    }
    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');
}

我在这个函数中一直试图做的是，如果用户打开了一个按钮，它应该在texbox中添加数字。例如，假设所有按钮都关闭了，如果我打开按钮"B"，那么当一个按钮打开时，文本框应该在文本框中显示数字1，如果我然后打开按钮"E"，当两个按钮现在打开时，它应该在文本盒中显示"2"等等。此外，如果我关闭按钮"E"，它应该回到显示文本框中的"1"，因为只有按钮"B"打开。换句话说，我想跟踪有多少按钮已经打开。

我如何才能做到这一点，因为当我打开按钮时，文本框中没有显示任何内容。

以下是应用程序的演示：

当你打开应用程序时，只需点击"打开网格"链接并选择一个网格按钮，当字母按钮出现时，点击按钮即可打开和关闭，因为你可以看到文本框中没有显示任何内容。