After user attempts answer, how to reset gameboard for next selection (jquery)

Question

I'm doing a jeopardy game. I am able to have a user select a square, the question appears with an input box, they click submit and the answer is compared to the correct answer. If correct, say so and add points to total, if wrong, say so and deduct points from total. But then the game is stuck. I can't figure out how to have the game be ready for the next question to be selected.

Here is the js code for the first question. Please let me know if you want more code (I didn't want this question to be messy). There may be a simple solution, so if you're wondering "why don't you just use ______, duh" the answer is because I'm a noob and I didn't know how to. Thank you so much in advance.

codepen: http://codepen.io/Nplagma/pen/XNerRw

$(document).ready(function() {
  $(".question").hide();

var score = 0;

$(".well").hover(function() {
$(this).addClass('blue');
}, function() {
$(this).removeClass('blue');
});

$("#A1").click(function() {
var questionValue = $(this).data("questionvalue");
             $(".question").show();
             $('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
             $('#submit').click(function() {
                 $("#answer").on('input')
                    var answer = $('#answer').val(); //what does this mean in words? 


                    if 
                        (answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
                        $('.question').replaceWith('<h3>omg you\'re so smart</h3>')      //using h3 because it'll be unique, but there must be a better way
                        score += questionValue;
                        $(".score").text("$" + score);
                    }
                    else 
                        {
                        $('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
                        score -= questionValue;
                        $(".score").text("$" + score);
         }

});
                        });

Answer 1

Just for your information. The approach you have chosen isn't maybe the best one for the task. your users could easily just check the code to find the answer to your questions. A "better" approach would be to store all the data (ie questions and answers) in a database and access that with ajax. You would then also need to learn a backend language and SQL.

You are also using different states. When this gets more complicated, you will find that its a pain to control them and keeping track of everything. This is where frontend frameworks really shines. I would recommend you to check them out. There are loads of them nowadays; React, Angular, Meteor, Vue, Backbone etc. Check them out and pick one that makes most sense to you. (

However, if your only making this application to learn javascript better. Go ahead with your approach :)