jquery, why var won't add up and why I cannot see the added img

Question

Just two things: why does my var check won't add up(it's always 0), and what to do to fix it? second, why I cannot add xmark images, after the table.

The setup of my html is I have alphabet imgs inside td. User should click the imgs alphabetically, every correct click the img is removed. If wrong, an xmark will appear.

(not yet in the code: after three wrongs, it's game over, and then i will ask user if he wants to play again or go back to home)

This is my jquery code:

     $("img").click(function(){
            var error = 0;
            var check = 0;    
            var letterArray = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            var clickedValue = $(this).attr('name');
            alert(check); 

            if(clickedValue ==letterArray[check]){
                $(this).parent().empty(); 
                check+=1;
            } else {
                error+=1;
                $("error").add('<td><img src="images/xmark.png" alt="xmark" name="xmark"/></td>');
            }
        });  

my table in html: just posted the first 6 letters for brevity.

           <table>
                <tr class="rows">
                    <td><img src="images/Z.png" alt="Z" name="Z"/></td>
                    <td><img src="images/R.png" alt="R" name="R"/></td>
                    <td><img src="images/S.png" alt="S" name="S"/></td>
                    <td><img src="images/U.png" alt="U" name="U"/></td>
                    <td><img src="images/B.png" alt="B" name="B"/></td>
                    <td><img src="images/A.png" alt="A" name="A"/></td>
                </tr>
           </table> 
           <table><tr id="error"></tr></table>

Answer 1

Each time the function gets run, new check and error variables are initialized. In order for them to keep state, you need to put them in a higher (such as global) context.

EDIT: For example:

var error = 0,
    check = 0,
    letterArray = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 $("img").click(function(){
        var clickedValue = $(this).attr('name');
        alert(check); 

        if(clickedValue ==letterArray[check]){
            $(this).parent().empty(); 
            check+=1;
        } else {
            error+=1;
            $("error").add('<td><img src="images/xmark.png" alt="xmark" name="xmark"/></td>');
// $("error") looks like the wrong selector. You're also misusing .add()
        }
    });  

Answer 2

Put your alert(check) in the last line of your click function, that is supposed to be different from zero.

Answer 3

Your code is in fact working. If you position your alert function within the if statement and then click the last image each time you will see the image removed and the value increment.

DEMO http://jsfiddle.net/hdRT5/53/

if(clickedValue == letterArray[check]){
                $(this).parent().empty(); 
                check+=1;
                alert(check);
            }