I have made a sortable list to rearrange the words to make a meaningful sentence. I am unable to figure out why the alert in checking the answer section is not working. This is not working: alert('success');

$(document).ready(function () {
var words = [];
var i = 0;
function showWords() {
$('#container').append("

");
for (var j = 0; j < words[i].question.length; j++) {
$('#list').append("* " + words[i].question[j] + " " + "
");
}

$('#list').sortable({
    placeholder: 'back',
    axis: 'x',
    opacity: '0.7'
});

}
showWords();

$(document).on('click', '#btn', function () {
var guess = $('.box').text();
$('#list').empty();
if (i < words.length); {
var correct = words[i].answer;
i++;
showWords();
}
if (guess === correct) {
alert('success');
}
});
});

I have coding of 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. This is the code which is not working:

$(document).on('click', '#restart', function() {
showQuestions();
});

The whole coding is: // Showing questions and options

var x = "";
var i = 0;

function showQuestions() {
document.getElementById('holder').
innerHTML = x;

for (j = 0; j < words[i].options.length; j++) {
if (i < words.length) {
$('#holder').append("

" +
words[i].options[j] + "

");
}
}
if (i < words.length) {
$('#holder').append('

' +
words[i].question + '

');
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

$(document).on('click', '#restart', function() {
$(this).fadeOut();
$('#holder').fadeIn();
showQuestions();
});

The function displays values of options property of array in separate divs. I want to give each div a unique id, which I have given, but the first displayed divs are replaced by totally different divs on click; so I am unable to give ids to each div. I want that divs should remain same and only the values should change on click. Presently the ids that I have given are removed when next values are displayed on click. How can I achieve that? Thanks for your suggestions.

Options 

var antonyms = [

    {
        question: "soft",
        options: \["dark", "white", "heavy", "hard", "down", "pretty", "butter", "cotton"\],
        answer: "hard"

    },

    {
        question: "beautiful",
        options: \["pretty", "ugly", "handsome", "wonderful", "up", "high", "cheerful", "black"\],
        answer: "ugly"

    },
 \]

// Define a method that generates the HTML for one question.


function showOptions(q)

{
    let qHtml = '

' + q.question + '

';

    qHtml += q.options.map(o => '

' + o + '

').join("");

    return qHtml;

}

```
// Start showing the first question. Click event will show next question.

let container = document.getElementById("container");

let button = document.getElementById("btnNext");

let qIdx = 0;

container.innerHTML = showOptions(antonyms\[qIdx\]);

button.addEventListener("click", function()

    {

        qIdx += 1;

        if (qIdx < antonyms.length)

            container.innerHTML = showOptions(antonyms\[qIdx\]);

        else

            button.disabled = true;

    });

```
// Giving unique id to each option div

$('#container div').each(function(eq, el) {

    el = $(el);

    if (typeof(el.attr('id')) === "undefined") {

        el.attr('id', 'box-' + eq);

    }

});