Question

Below is the code I have where it is suppose to display the number within the textbox when the “Add” button is clicked on $('#mainNumberAnswerTxt').val(numberAnswer);. But I also have a line of code where it triggers the function for when a (btn ‘button’) is clicked on.

 function addwindow(numberAnswer, gridValues, btn) { 
    $('#mainNumberAnswerTxt').val(numberAnswer);
    $('#btn'+gridValues).trigger('click');       
 }

Because of the trigger it triggers this function $('.gridBtns').on('click', function(). In this function is this line of code

$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');,

This line of code checks for how many buttons were turned on when the gridBtn is clicked and displays the number in the textbox. But the line of code above is overwriting the $('#mainNumberAnswerTxt').val(numberAnswer); in the addwindow() function.

EXAMPLE:

If there were 2 ‘#btns’ which were turned on but then I click on the “Add” button to add the number displayed under the “Number of Answers” column (lets say this number is 1), then it should display number 1 in the textbox by this code taking affect $('#mainNumberAnswerTxt').val(numberAnswer);, but instead it is displaying number 2, because this code is taking affect: $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');

How can I get number 1 to be displayed and not number 2 to be displayed in the example above

Below is html code of textbox:

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

UPDATE:

Here is a demo of the application. Please follow the steps below:

• 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.
• Step 2: Select 4 letter buttons underneath of you choice. You will
  see when you turn on a letter button the textbox above counts it.
• Step 3: Now on left hand side you will see a green plus button, click
  on it and it opens up a modal window.
• Step 4: In modal window there is a search bar, type in “AAA” and
  submit search, you will see a bunch of rows appear.
• 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 which you can read
  below.

Problem:

In the “Number of Answers” textbox, it should display the number 1, but it doesn’t.

Answer 1

Ok, this question is quite confusing, but I think i figured out what you want:
Just add a class or attribute to the mainNumberAnswerTxt so it can be ignored by the second on click event

function addwindow(numberAnswer, gridValues, btn) { 
    $('#mainNumberAnswerTxt').val(numberAnswer).attr('data-ignore',true);
    $('#btn'+gridValues).trigger('click');       
}

and then in your $(‘.gridBtns’).on(‘click’, function() you simply check (don’t know your exact html & js-code)

if(this).attr('data-ignore') != true {
    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ?      context.find('.answerBtnsOn').length : '');
}