Unable to reference a function from a javascript controller with hotwire/stimulus

I’m not sure if this is a local setup issue, or if it’s a code issue, but I’m having trouble using a new function on an existing controller. It’s possible this controller was never successfully being imported in the first place. Even after having the controller specified in the layout and referencing it in the view, I’m being told that it’s referencing an undefined method:

Error

I have done the following for startup:

$ rm -rf public/assets
$ rails assets:precompile
$ bundle install
$ rails s

Here’s what I have

  # application.html.erb
  <body data-controller="modal data">
    
    <%= yield %>

  </body>

// javascript/controllers/modal_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["container", "background", "panel", "terms"]

  changeVisibility(element, visible) {
    console.log(element, hidden);
    if (visible) {
      $(element).on('click', function () {
        $('#terms_modal').removeClass('hidden');
      });
    } else {
      $(element).on('click', function () {
        $('#terms_modal').addClass('hidden');
      });
    }
  };
}

# app/views/home/girl.html.erb
<p>You agree to our <a class="text-red open_terms" data-action="click->modal#changeVisibility('terms_modal', true)">Terms and conditions</a></p>

// app/javascript/controllers/index.js


// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

// other controllers

import ModalController from "./modal_controller"
application.register("modal", ModalController)