Why does my code output once and then again after timer ends?

Question

I'm not sure why I get an output twice once when quiz is finished(before 50 secs) and again when the timer ends. This is causing a problem for my database which keeps inputting data in twice. I used the jquery-1.9.1.min.js and watch.js which are pre-scripted. The code that I'm displaying is below are my code that I've written. The timer is set at 50 sec. Here is an example of my problem:

Output after: 20 sec         Output after:50 sec
    Answer: 3                      Answer: 3
    Wrong: 6                       Wrong: 6
    Unanswered: 4                  Unanswered: 4
    Score: 50                      Score:50

                                   Answer: 3
                                   Wrong: 6
                                   Unanswered: 4
                                   Score: 50

index.php First part of the code is connecting to database and calling all the data out of a table for the quiz which includes questions(4 answers each) and a "next" button.

//Here is where the timer function

<div id="demo1" class="demo" style="text-align:center;font-size: 25px;">00:00:00</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/watch.js"></script>
<script>
$(document).ready(function(){
    $('#demo1').stopwatch().stopwatch('start');
    var steps = $('form').find(".questions");
    var count = steps.size();
    steps.each(function(i){
        hider=i+2;
        if (i == 0) {   
            $("#question_" + hider).hide();
            createNextButton(i);
        }
        else if(count==i+1){
            var step=i + 1;
            //$("#next"+step).attr('type','submit');
            $("#next"+step).on('click',function(){

               submit();

            });
        }
        else{
            $("#question_" + hider).hide();
            createNextButton(i);
        }

    });
    function submit(){
         $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: $('form').serialize(),
                        success: function(msg) {
                          $("#quiz_form,#demo1").addClass("hide");
                          $('#result').show();
                          $('#result').append(msg);
                        }
         });

    }
    function createNextButton(i){
        var step = i + 1;
        var step1 = i + 2;
        $('#next'+step).on('click',function(){
            $("#question_" + step).hide();
            $("#question_" + step1).show();
        });
    }
    setTimeout(function() {
          submit();
    }, 50000);
});
</script>

</body>
</html>

The next file ajax.php is where my results are displayed and where I'm getting the problem.

$response=mysql_query("select id,question_name,answer from questions");
     $i=1;
     $right_answer=0;
     $wrong_answer=0;
     $unanswered=0;
     while($result=mysql_fetch_array($response)){ 
           if($result['answer']==$_POST["$i"]){
               $right_answer++;
           }else if($_POST["$i"]==5){
               $unanswered++;
           }
           else{
               $wrong_answer++;
           }
           $i++;
     }
     echo "<div id='answer'>";
     echo " Right Answer  : <span class='highlight'>". $right_answer."</span><br>";

     echo " Wrong Answer  : <span class='highlight'>". $wrong_answer."</span><br>";

     echo " Unanswered Question  : <span class='highlight'>". $unanswered."</span><br>";
     $total=$right_answer+$wrong_answer+$unanswered;
     $score=($right_answer/$total)*100;
     echo " Your Score : <span class='highlight'>". $score."</span> <br>";
     echo "</div>";

$taken = 1;
//insert athlete score
$myscore = "INSERT INTO quiz_results (athlete, score, taken) VALUES ('$_SESSION[loginname]' , '$score', '$taken')";

echo "</br>";
$results= mysql_query($myscore,$con);
 if($results)
 echo "Score inputted";

Answer 1

You are calling the submit function twice: once when a person clicks the next button, and the second time after 50 seconds - independent of any user action. Just count the submit() calls.

Answer 2

You should cancel the timeout before you call submit() as a result of the user clicking the last "next" button.

The call to setTimeout() returns an ID for the timeout. You can use that to cancel the timeout.

var timeoutId = setTimeout(function() {
    submit();
}, 50000);

Then when the user answers the last question and clicks the "next" button:

clearTimeout(timeoutId);
submit();