Tatun Rathore

I am building a quiz with an array which has questions and options. First time the function is called successfully but when restarting the quiz, the function is not invoked. // Showing questions and options var x = " "; var i = 0; function showQuestions() { document.getElementById('holder').innerHTML = x; for (j = 0; j < words.options.length; j++) { if (i < words.length) { $('#holder').append("<div id=" + words.options[j] + " class='alternatives'>" + words.options[j] + "</div>"); } } if (i < words.length) { $('#holder').append('<div id="quest">' + words.question + '</div>'); i++; } } showQuestions(); // Calling function on click of alternatives $('#holder').on('click', '.alternatives', function() { showQuestions(); }); // Checking answers score = 0; k = 0; $(document).on('click', '.alternatives', function() { let guess = this.id; if (k < words.length) { var correct = words[k].answer; k++; } if (guess === correct) { score++; } if (score <= words.length) { z = score; document.getElementById('summary').innerHTML = z; } if (k >= words.length) { $('#holder').fadeOut(); $('#restart').fadeIn(); } }); // Restarting Quiz // show Questions function is not working $(document).on('click', '#restart', function() { $(this).fadeOut(); $('#holder').fadeIn(); showQuestions(); });