How to display buttons using $(this).show();

I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.

The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)).

Now I have included this in my code:

var clickedNumber = 10;
$('.answerBtns').each(function (index) {
    if (index < clickedNumber) {
        $(this).show();
    }
});

Now what this does is no matter how which button I select in the first grid, it will always display 10 buttons. So what I need is clickNumber to be in a loop so it loops through the buttons, so if the user selects button “1” in first grid (the grid which you have to open using (Open Grid) link, then it should display the first button which is “A” in second grid, if user selects button “2” in first grid, then it should display the first two buttons “A” and “B” in second grid, if “3” then display “A”, “B” and “C” and so on.

But also if user selects “True or False” button in first grid, it should display only “true” and “false” buttons in second grid and if user selects “yes or no” button in first grid, it should display “Yes” and “No” buttons only in second grid.

Does anyone know how to do this?

Thank you

Code is in jsfiddle, click here

Yes indeed. You would move the clickedNumber code in to the click event for the input field.
First you would hide all of the answer buttons and then go on to using a three part if/else if statement. The first couple would check if the value is the true/false or yes/no value so that you can show those buttons. Otherwise, you can show the buttons based on the value of the input field.