Slick Slider errors when using Express on Heroku

I'm having few problems with using Slick Slider and getting different types of errors in different cases.

Everything works exactly as I want, but only locally, and I'm trying to push it on Heroku with $ git push heroku master command.

I made a folder, and ran below commands

 1. npm init
 2. git init
 3. npm i -S express ejs      
 

Folder contains:

- index.html
- app.js
- package.json
- package-lock.json
- views 
  -- index.ejs
- public 
  -- css
    --- slick.css 
    --- styles.css
  -- js 
    --- slick.min.js           
  -- images 
    --- (full of images)

This is my head in ejs template

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bg design</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <link rel="stylesheet" href="/css/slick.css">
    <link rel="stylesheet" href="/css/styles.css">
  </head>

and this is end of body

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="/js/slick.min.js"></script>
    <script>
      $(document).ready(function(){
      $('.multiple-items').slick({
          prevArrow: '.arrow_prev',
          nextArrow: '.arrow_next',
          slidesToShow: 3,
          autoplay: true,
          arrows: true,
          autoplaySpeed: 5000,
          centerMode: true,
          speed: 500,
          swipeToSlide: true,
          cssEase: 'linear',
          responsive: [
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 2,
                  centerMode: true,
                  centerPadding: '40px',
                  prevArrow: 'false',
                  nextArrow: 'false',
                  slidesToScroll: 2
                }
              },
              {
                breakpoint: 480,
                settings: {
                  slidesToShow: 1,
                  centerMode: true,
                  prevArrow: 'false',
                  nextArrow: 'false',
                  centerPadding: '40px',
                  slidesToScroll: 1
                }
              }
              // You can unslick at a given breakpoint now by adding:
              // settings: "unslick"
              // instead of a settings object
            ]
      });
  });
    </script>
    <script type="text/javascript" src="app.js"></script>
    <!-- Index HTML -->
  </body>
</html>

This is app.js

const express = require('express'),
app = express();

app.set('view engine', 'ejs');
app.use(express.static(__dirname + "/public"));

app.get("/", (req, res) => {
  res.render("index");
});

app.listen(3000, () => {
  console.log("Server on!")
});

package.json

{
  "name": "barbora_alpha",
  "version": "1.0.0",
  "description": "Barbora's website",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //This line  "start": "node app.js" is here because of heroku. I have it from Colt Steel's course.without it heroku throws error.
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.3",
    "express": "^4.17.1"
  }
}

I tried it locally by clicking right mouse on my index.ejs in my Visual Studio and everything looks like it's working just fine.

But if I opened up developer console I see there:

"Failed to load resource: the server responded with a status of 404 (Not Found) app.js:1"

Then I used:

 git add .
 git commit -m "First commit"
 heroku create ( I'm alread logged in to heroku and already pushed 5-6 apps with no problems like this)
 git push heroku master

And I got Reference error : $ is not defined; after I checked my Heroku logs I found H81 Heroku error.

Every other app worked just fine when I wasn't using jQuery.

I would appreciate ANY help. I tried everything and I'm stuck for the 5th day, looking for answers around the internet and I don't know what to do.

I tried different paths for files.

Different options for:

app.use(express.static(__dirname + "/public"));

app.use(express.static(__dirname + "/"));

One or another or both of them.

If I do "/" I loose all static files images, css, Slick Slider plugin functionality.

If I do "/public" I'm getting:

Failed to load resource: the server responded with a status of 404 (Not Found) app.js:1

Conclusion: I want to push it on Heroku like any other previous app, but have a problem with jQuery because $ is not defined. Whilst using same approach like on the other apps.

Thank you for any help.