CSS dynamic table based on Collection

help
1

Hello Everyone,

I’m not realy a prorgrammer en new to Meteor. I found a samplecode on https://github.com/reinzor/meteor-bingo and made some changes. It’s a bingo application that has a fill backend and a beamer frontend. If i fillout a number it adds to the Collection and it prints the last number on the beamer site. So far so good.

Now i want to make a table with 5 columns and 10 rows with the numer 1-50 in it. vertical alligned. If the number exists in the Collection or added to the collection I want to change the collor of the cell of that number. How can that be done and what is the best way to do it.

main.js
Collections = {}
Collections.Numbers = new Mongo.Collection("numbers");

   'submit .new-number': function (event) {
      // Prevent default browser form submit
      event.preventDefault();
 
      // Get value from form element
      var number = parseInt(event.target.text.value);
 
      // Insert a task into the collection
      Collections.Numbers.insert({
        number: number,
        timestamp: (new Date).getTime() // current time
      });
 
      // Clear form
      event.target.text.value = "";
    }

if (Meteor.isClient) {

  Template.main.helpers({
    numbers: function () {
      return Collections.Numbers.find({}, {sort: {timestamp: -1}}).fetch();
    }
  });


Template:
{{#each numbers}}<li>{{number}}</li>{{/each}}
    <div id="balls">
	<table class="tg">
  <tr>
    <th class="tg-yw4l">B</th>
    <th class="tg-yw4l">I</th>
    <th class="tg-yw4l">N</th>
    <th class="tg-yw4l">G</th>
    <th class="tg-yw4l">O</th>
  </tr>
  <tr>
    <td class="tg-yw4l">1</td>
    <td class="tg-yw4l">4</td>
    <td class="tg-yw4l">7</td>
    <td class="tg-yw4l">10</td>
    <td class="tg-yw4l">13</td>
  </tr>
  <tr>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">5</td>
    <td class="tg-yw4l">8</td>
    <td class="tg-yw4l">11</td>
    <td class="tg-yw4l">13</td>
  </tr>
  <tr>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">6</td>
    <td class="tg-yw4l">9</td>
    <td class="tg-yw4l">12</td>
    <td class="tg-yw4l">14</td>
  </tr>
</table>
    </div>

Kind regards,

Lexley