Ember onClick event not completing action

I'm working on an Ember app and I'm having trouble wrapping my brain around handling the DOM and components. I have a companies-expander component that will display every company in the database and will expand to show the jobs that are available at the company:

//companies.hbs
<h1>Companies</h1>

{{#each model as |company| }}
  {{company-expander name=company.name url=company.url address=company.address positions=company.positions}}
{{/each}}

{{outlet}}

The company-expander component template looks like this:

<div class="expander">
  <a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">{{name}}</a>
  <div id="js-expander-content" class="expander-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
</div>

company-expander.js looks likes this:

import Ember from 'ember';

export default Ember.Component.extend({
    _setup: Ember.on('didInsertElement', function() {

        console.log("doc ready");
        var expanderTrigger = document.getElementById("js-expander-trigger");
        var expanderContent = document.getElementById("js-expander-content");

        $('#js-expander-trigger').click(function(){
          console.log("click");
          $(this).toggleClass("expander-hidden");
        });

    })
});

The component successfully loads and pulls the name of the company. The problem is the click only registers when clicking on the first item and registers the number of clicks as however many company records are returned. The class of the div is also not toggled.