trigger is causing an overwrite meaning wrong number is displayed in textbox
<p>I have set up a demo for this problem which you can access by clicking on
<a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text14.php" rel="nofollow">DEMO</a></p>

<ul>
<li>Step 1: When you open up the demo, click on the "Open grid" link and
select button "7". This will display a textbox and 7 letter buttons
underneath.</li>
<li>Step 2: Select 2
letter buttons underneath of you choice. (a button is selected when turned green)</li>
<li>Step 3: Now on left hand side you will see a green plus button, click
on it and it opens up a modal window.</li>
<li>Step 4: In modal window there is a search bar, type in "AAA" and
submit search, you will see a bunch of rows appear.</li>
<li>Step 5: In the first row, you see under "Number of Answer" colum that
it contains the number 1, click on the "Add" button within this row,
the modal window will close but there is problem as that the "Number of Answers" textbox does not display "1". It displays "2", the reason for this is explained below:</li>
</ul>

<p>Problem:</p>

<p>In the "Number of Answers" textbox, it should display the number 1 as under the "Number of Answers" column within the row added did it state the number "1", but it doesn't display 1 in the textbox, it displays the number 2 and the reason it is displaying this number is that because I have this line of code below.</p>

<p>Now this is happening because of this code:  </p>

<pre><code>$('.answertxt', context).val(context.find('.answerBtnsOn').length &gt; 0 ? context.find('.answerBtnsOn').length : '');,
</code></pre>

<p>in the <code>$('.gridBtns').on('click', function()</code> but I do need this code. </p>

<p>The reason I need this code is because lets say there is 7 letter buttons "A-G" and you turn on all the letter buttons, the textbox would display number "7", but if I change my mind and I want to only display 5 letter buttons "A-E", then the textbox would change from "7" to "5" as now only 5 buttons are turned on. That is why I need this code.</p>

<p>So my question is that if the user has clicked on the "Add" button, how can I get the number from the "Number of Answers" column within the row added be displayed in the textbox?</p>

<p>Below is the code I have where it is suppose to display the number within the textbox when the "Add" button is clicked on ...</p>

<pre><code> function addwindow(numberAnswer, gridValues, btn) { 

            $('#mainNumberAnswerTxt').val(numberAnswer);
            $('#btn'+gridValues).trigger('click');

    }
</code></pre>

<p>but the <code>$('#mainNumberAnswerTxt').val(numberAnswer);</code> is over written because of the <code>"$('#btn'+gridValues).trigger('click');"</code>  as that this line of code triggers this function <code>$('.gridBtns').on('click', function()</code> and in that function is the code below which checks for how many buttons are currently turned on after the user has clicked on a grid button:</p>

<pre><code>$('.answertxt', context).val(context.find('.answerBtnsOn').length &gt; 0 ? context.find('.answerBtnsOn').length : '');,
</code></pre>
