How to use jQuery with EJS?

Question

I am making a blog website. I am trying to make a page to publish blog posts. I want to retrieve data from form input using JQuery.

I am getting errors related to '$'. This is the error

ReferenceError: C:\Users\samiksha\Desktop\Blog-Website\views\compose.ejs:8
    6| </form>

    7| 

 >> 8| <% $(document).ready(function(){ %>

    9| 

    10| <% $('form').on('submit', (e) => { %>

    11| 


$ is not defined

I have read many answers related to this on StackOverflow but still getting errors. The things I have tried are :

1. Added Jquery in my header template

2. Used document.ready...

3. Used correct EJS syntax

My folder structure is

public
   |
    - styles.css
 
views
   |
   partials
      |
       - header.ejs

      |- footer.ejs

   |
    - compose.ejs

   |
    - home.ejs

   |
    - about.ejs

   |
    - contact.ejs


app.js

My code for compose.ejs is

<%- include ./partials/header -%>

<h1>Compose</h1>
<form action="/" method="post">
    <input name="inp1" type="text"><button type="submit">Publish</button>
</form>

<% $(document).ready(function(){ %>

<% $('form').on('submit', (e) => { %>

   <% const formData = new FormData(e.target); %>
   <% console.log(formData) %>

 <% }); %>

<% }); %>

<%-include ./partials/footer -%>

I am getting no idea how to validate the use of jquery with this

Thanks in advance...