Discourse Onclick Event to Reveal Hidden Image

Creating a Discourse plugin, and I'm trying to add an 'onclick' event to the 'Expand' button of the Discourse controls menu. Within the menu, I have added an img that I want to be revealed upon clicking 'Expand', but currently has a class, 'hidden-badge'. This is the code I have so far:

<section class='controls'>
    <img class="hidden-badge" src="https://ooblar/user_avatar/ask.twobyfore.com/dexterassociates/120/151_1.png">
        <ul>
          {{#if model.can_send_private_message_to_user}}
          <li>
            <a class='btn btn-primary' {{action "composePrivateMessage" model}}>
              {{fa-icon "envelope"}}
              {{i18n 'user.private_message'}}
            </a>
          </li>

There is, further down in 'controls', code which I'm trying to set as the trigger to reveal the hidden image, it is:

<a href="" class="btn unhide-profile-badge" data-ember-action="1176"><i class="fa fa-angle-double-down"></i>Expand</a>

I know the JS script loads because I put a console.log("Hello I work") code at the start. The JS code is:

$('.controls').on('click', '.unhide-profile-badge', function(e) {
  $('img.hidden-badge').removeClass('hidden-badge');

Could anyone help why this it isn't triggering the removal of the class (which I have in a CSS file not posted here).