Update html meteor?

I am trying to output an estimated time based off the number of items (people) within my database (this is a wait list). Currently I save a value in the quick form called countNumber. This is just set to 1 everytime. I then get the count of all the items by finding the all items that have countNumber = 1 (all of them). I then try updating the html using getElementById().

The problem I am having is that when I add a person to the database the estimated time will go up appropriately. However when I refresh the page the html resets to 0 like the initial html that is put in.

How do I fix this so that the html will always display the appropriate time even when the page is refreshed?

Html code:

<head>
    <title>Wait List</title>
</head>

<template name= "home">
    <body>
        <h2 id="insert">Approximate Wait Time: 0 Minutes</h2>
        <div class="col-lg-6 col-lg-offset-3">
            {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}
        </div>
    </body>
</template>

js code:

AutoForm.hooks({
    studentForm:
{
    onSuccess: function (insert,result) {
        var totalCount = Students.find({countNumber:1}).count();
        var waitTime = "Approximate Wait Time: " + totalCount*15 +" Minutes";
        document.getElementById("insert").innerHTML = waitTime;

        ...

    },
}
});

Solution

You should put this into a helper instead of a hook.

Template.home.helpers({
   waitTime: function(){
       var totalCount = Students.find({countNumber:1}).count();
       var waitTime = totalCount*15;
       return waitTime;
   }
});

and change the <h2> line in the html to this.

<h2 id="insert">Approximate Wait Time: {{waitTIme}} Minutes</h2>