Multiple timers on a single page of a meteor application

help
1

Help i am trying to create multiple timers from a collection based in mongodb. I am able to create just one timer and it works as it is suppose to be. Trying to create the multiple timer i end up with just the last timer in the array of collection pulled from the database. I have tried searching on the internet but i haven’t come to any luck.This is my sample code i posted on stackoverflow asking the same question.
```
Template.viewTeamTermPaper.onCreated(function(){
let template = Template.instance();
template.subscribe(‘getTeamTermPaper’);
template.lastDateSubmit = new ReactiveVar()
template.timeInterval = new ReactiveVar();
template.timeLapse = new ReactiveVar()
template.autorun(function () {
if (template.lastDateSubmit.get()){
template.timeInterval.set(setInterval(function() {
let todayDate = new Date()
//Session.set(“time” , todayDate);
template.timeLapse.set(getTimeRemaining(template.lastDateSubmit.get()));
//Session.set(“timeLapse” , timeLapse);
} , 1000));
}
});

});

I am displaying the each instance of the template with an helper called lastDate().

Template.viewTeamTermPaper.helpers({
lastDate(){
let papers = TeamTermPaper.find({}).fetch();
return papers.map(function(paper){
let obj = {}
obj.paper = paper;
Template.instance().lastDateSubmit.set(paper.last_submission_date);
obj.time = Template.instance().timeLapse.get()
//arr.push(obj)
return obj
});

//return arr;
}

});


I am trying to display multiple timers on a template. My template onCreated function is given below

Template.viewTeamTermPaper.onCreated(function(){
let template = Template.instance();
template.subscribe(‘getTeamTermPaper’);
template.lastDateSubmit = new ReactiveVar()
template.timeInterval = new ReactiveVar();
template.timeLapse = new ReactiveVar()
template.autorun(function () {
if (template.lastDateSubmit.get()){
template.timeInterval.set(setInterval(function() {
let todayDate = new Date()
//Session.set(“time” , todayDate);
template.timeLapse.set(getTimeRemaining(template.lastDateSubmit.get()));
//Session.set(“timeLapse” , timeLapse);
} , 1000));
}
});

});

I am displaying the each instance of the template with an helper called lastDate().

Template.viewTeamTermPaper.helpers({
lastDate(){
let papers = TeamTermPaper.find({}).fetch();
return papers.map(function(paper){
let obj = {}
obj.paper = paper;
Template.instance().lastDateSubmit.set(paper.last_submission_date);
obj.time = Template.instance().timeLapse.get()
//arr.push(obj)
return obj
});

//return arr;
}

});

I have a function which calculates the elapsed time.
     ```
     function getTimeRemaining (endtime){
        let t = Date.parse(endtime) - new Date();
        let seconds = ("0" + Math.floor((t/1000) % 60)).slice(-2);
        let minutes = ("0" + Math.floor((t/1000/60) % 60)).slice(-2);
        let hours =   ("0" + Math.floor((t/(1000 * 60 * 60)) %   24)).slice(-2);
        let days = Math.floor(t/(1000*60*60*24));

        if (t <= 0){
            //clearInterval(timeInterval);
        }

        return {
            'total' : t,
            'days'  : days,
            'hours' : hours,
            'minutes': minutes,
            'seconds' : seconds
        }
}

This is how i out put the instance of the template

<template name="viewTeamTermPaper">
  {{#each lastDate}}
      {{> studentViewTeamPaper}}
  {{/each}}
</template>

 ```
 <template name="studentViewTeamPaper">

           <thead>
             <tr>
              <th class="text-danger">Term Paper Name</th>
              <th class="text-danger">View</th>
              <th class="text-danger">Count Down</th>
            </tr>
           </thead>


         <tbody>

           <tr>
              <td>

                  {{paper_name}}


              </td>

              <td>
                  {{last_submission_date}}

              </td>

              <td></td>
          </tr>

        </tbody>
      </table>
    </div>


 </div>
```
2

Please edit your post and wrap code blocks between lines of triple backticks. Like this:

```
your
code
here
```