I'm trying to use jQuery to toggle the class of a div in order to highlight it as being "selected". These divs are rendered through a loop in the code below:

```
<template name="Watchlist">
<div class="wrapper">
    {{#each watchlist}}
        {{> WatchlistCompany}}
    {{/each}}
</div>

```

```
<template name="WatchlistCompany">
<div class="wrapper watchlist-company-item" id="{{_id}}">
    <div class="company-text">
        <div id="company-name">
            {{companyName}}
        </div>
    </div>
</div>

```

In the Elements tab, I can see the id's are assigned above using the id of the document that also hold the other fields. Using the following, I can change the color of the div that has this specific id, but not the others.

```
Template.Watchlist.events({
'click .watchlist-company-item': function(e) {
    $('#8NAQWByZbHFwdFPJg').toggleClass('watchlist-selected');
}
});

.watchlist-selected {
  background-color: darkorange;
}

```

However, these divs are rendered dynamically so this doesn't help. I'm trying to replicate the code above but first finding the id of the clicked div but I can't figure out what I'm doing wrong.

First I tried assigning the id to a variable. This doesn't work (nothing happens), even though it's almost exactly like above.

```
Template.Watchlist.events({
'click .watchlist-company-item': function(e) {
    var selectedId = "8NAQWByZbHFwdFPJg";
    $('#selectedId').toggleClass('watchlist-selected');
}
});

```

Next, I tried finding the id from the clicked div, but this doesn't work either (nothing happens.

```
Template.Watchlist.events({
'click .watchlist-company-item': function(e) {
    var selectedId = event.currentTarget.id;
    $('#selectedId').toggleClass('watchlist-selected');
}
});

```

I'm pretty sure the problem is in the event.currentTarget.id, because if I simply change '#selectedId' to 'div' above, the color of the entire page changes. So everything short of finding the id is correct.

Thank you.