I was working on some code where I create a website to practice French. I created a method to check my answers but it did not work for a second question. My HTML and JavaScript are below:

HTML:

```
<!DOCTYPE html>
<html>
    <head>
        <script src = "Contest.js"></script>
        <title>Verb Practice</title>
    </head>

    <body>
        <input type = "button" onclick = "location.href = 'file:///C:/Users/aryan/Desktop/HTML,%20JavaScript,%20&%20CSS/Contest.html#vocab';" value = "Back To Main" />
        <center>
            <h2>Verb Practice</h2>
            <fieldset>
                <p>What is the infinitive for the verb underlined?</p>
                <p>J'<ins>ache&#768;te</ins> une pizza.</p>
                <input type = "text" name = "Q1" value = "" id = "ansGiven"><br>
                <input type = "submit" value = "Answer" id = "Q1" onclick = "getAns('acheter')">
                <p id = "ansRes"></p>
            </fieldset>

            <fieldset>
                <p>What does the verb <i>attendre</i> mean?</p>
                <input type = "text" name = "Q2" value = "" id = "ansGiven"><br>
                <input type = "submit" value = "Answer" id = "Q2" onclick = "getAns('to wait')">
                <p id = "ansRes"></p>
            </fieldset>
        </center>
    </body>
</html>

```

JavaScript:

```
function getAns(ans) {
    var ansGiven = document.getElementById("ansGiven").value;
    console.log(ans);
    console.log(ansGiven);

    if (ansGiven === ans) {
        document.getElementById("ansRes").innerHTML = "Correct!";
    } else {
        document.getElementById("ansRes").innerHTML = "Try Again.";
    }

    ansGiven = "";
}

```

Theoretically, the method getAns() should say whether the input for the given question is correct or wrong. Instead, the first question works fine, but the second question displays its input as nothing. Why would this be happening and what was wrong with the code?