title: Meteor: Bind function to work for every iteration of template
body: <p>I'm fairly new to Meteor and I can't get my head around how to get a function to work in every iteration of a template independently from the others. I've written a very basic function where I want to display a pop up inside each template on button click, but the pop up always appears at the first generated template instead of being bound to the specific button I click. I've searched around and found that it might have to do with template instances or reactive variables but as of now I'm rather confused. 
  Could this be on the right track? <a href="https://dweldon.silvrback.com/template-instance" rel="nofollow">https://dweldon.silvrback.com/template-instance</a></p>
  
  <p>My code:</p>
  
  <p>.html</p>
  
  <pre><code>&lt;body&gt;
    {{&gt; test}}
  &lt;/body&gt;
  
  &lt;template name="test"&gt;
    {{#each tasks}}
      &lt;button type="button" id="popup"&gt;Click Me!&lt;/button&gt;
      &lt;div id="pops"&gt;Hi&lt;/div&gt;
    {{/each}}
  &lt;/template&gt;
  </code></pre>
  
  <p>.js</p>
  
  <pre><code>Tasks = new Mongo.Collection("tasks");
  
  if (Meteor.isClient) {
    Template.test.helpers({
      tasks: function () {
        return Tasks.find({});
      }
    });
  
    Template.test.events({
      'click #popup': function(e, template) {
        template.$('#pops').fadeIn();
      }
    });
  }
  </code></pre>
  
  <p>I haven't written anything in the server code at all.
  Thanks!</p>