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

[malcolm p]

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

[Airshow]

Malcolm,

You need two groups of buttons, _A (alphabetic) and _B (boolean), and you need to hide those you don't want to show.

For A,B,C buttons:

$('.answerBtns_A').each(function(index){
  (index < clickedNumber) ? $(this).show() : $(this).hide();
});
$('.answerBtns_B').hide();

For true/false buttons:

$('.answerBtns_A').hide();
$('.answerBtns_B').show();

Airshow