I have a generic template that I use multiple times.

```
{{#each item}}
   {{> genericTemplate}}
{{/each}}

```

Inside of this template I have a button that when it is clicked fires a hidden file input in the generic template. 

```
 $(".upload").click();

```

Unfortunately for each template the ".upload" class gets fired. So if I had four `items`, it would give me 4 file inputs. I can't give the buttons a unique `id=""` because then I would have to explicitly define each event for each id, negating the entire reason for creating the generic template in the first place. What is the proper way to achieve something like this? 

EDIT:

My template events look like this:

```
Template.generic.events({
   'click .fileUpload' : function () {
     $(".upload").click(); // sets off the 4 templates .upload class
   },
  'change .upload' : function (e) {
    console.log('upload')
   }
})

```

HTML: 

```
<template name="generic">
   <!--Hidden Inputs that get fired on click events -->
   <div class="hiddenFile">
      <input type="file" class="upload"/>
   </div>

  <button class="btn btn-success fileUpload">UPLOAD FILE </button>
</template>

```