I tried to read jquery but it did not work. I want to hide the download and cancel button once users click the download button, and show back button.

This is error when I run.

Uncaught ReferenceError: $ is not defined

This is show.html.erb

 <button class="btn btn-primary" type="submit" id="download_button"><%= t(".download") %></button>
          <%= link_to t("cancel"), certs_path, class: "btn btn-default", id: "cancel_button" %>
          <%= link_to t("back"), certs_path, class: "btn btn-default", id: "back_button", style: "display:none;" %>

....

<!-- After downloading the certificate,
   prevent the button from being pressed to prevent certs re-creation. -->
<script>
    $("#download_button").on("click", () => {
        $("#download_button").hide()
        $("#cancel_button").hide();
        $("#back_button").show();
    });
</script>

This is config/webpack/environment/js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'admin-lte/plugins/jquery/jquery',
    jQuery: 'admin-lte/plugins/jquery/jquery',
  })
)

module.exports = environment

This is app/assets/javascipts/application.js

//= require jquery
//= require_tree .

I also tried rails s, and bundle update but it did not work.