Javascript and JQuery not working properly in my website project

Question

Js and jquery are not working properly, the menu-toggle button does not work in responsive mode. the carousel (using slick) is not working properly in full page mode as well as (dont mind the carousel in responsive mode as am still working on it: Update: I updated the code to reflect more of the problem), to be more specific, the prev and next arrows are not working, why???

Here's a link to the code: https://codepen.io/bderrickmatthew/pen/BaYLYbe and also below a stackoverflow snippet. By the way I have tried scouring into lots of articles here on stackoverflow and other sites and still nothing is working, its been a week so far, I've tried everything I could think of, asking this question here is probably a last resort option for me now!

$(document).ready(function() {
  $(".menu-toggle").on("click", function() {
    $(".nav").toggleClass("showing");
    $(".nav ul").toggleClass("showing");
  });

  $(".post-wrapper").slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    nextArrow: $(".next"),
    prevArrow: $(".prev"),
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});

/* Universal */

* {
  box-sizing: border-box;
}

body {
  padding: 0px;
  margin: 0px;
  background: #F5E6CC;
  font-family: Montserrat, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1d1d1d;
  margin: 5px;
}

a {
  text-decoration: none;
  color: inherit;
}


/* Header */

header {
  background-color: #4C495D;
  height: 66px;
}

header * {
  color: #eeeeee;
  height: 66px;
}

header .logo {
  float: left;
  height: inherit;
  margin-right: 2em;
}

header .logo-text {
  margin: 9px;
  font-family: Montserrat, sans-serif;
}

header .logo-text span {
  color: #2D283E;
}

header ul {
  float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

header ul li {
  float: left;
  position: relative;
}


/*dropdown*/

header ul li ul {
  position: absolute;
  top: 66px;
  right: 0px;
  width: 220px;
  display: none;
  z-index: 88888;
}

header ul li:hover ul {
  display: block;
}

header ul li ul li {
  width: 100%;
}

header ul li ul li a {
  padding: 10px;
  color: gray;
  background: white;
}

header ul li ul li a.logout {
  color: red;
}

header ul li ul li a:hover {
  background: #534e6e;
}

header ul li a {
  display: block;
  padding: 21px;
  font-size: 1.1em;
  text-decoration: none;
}

header ul li a:hover {
  background: #2d2a3e;
  transition: 0.5s;
}

header .menu-toggle {
  display: none;
}


/* Carousel */

.page-wrapper a:hover {
  color: lightseagreen;
}

.post-slider {
  position: relative;
}

.post-slider .slider-title {
  text-align: center;
  margin: 30px auto;
}

.post-slider .next {
  position: absolute;
  top: 50%;
  right: 30px;
  font-size: 2em;
  color: #006669;
  cursor: pointer;
}

.post-slider .prev {
  position: absolute;
  top: 50%;
  left: 30px;
  font-size: 2em;
  color: #006669;
  cursor: pointer;
}

.post-slider .post-wrapper {
  width: 84%;
  height: 350px;
  margin: 0px auto;
  overflow: hidden;
  padding: 10px 0px 10px 0px;
}

.post-slider .post-wrapper .post {
  width: 300px;
  height: 330px;
  margin: 0px 10px;
  display: inline-block;
  background: white;
  border-radius: 5px;
  box-shadow: 1rem 1rem 1rem -1rem #a0a0a033;
}

.post-slider .post-wrapper .post .post-info {
  height: 130px;
  padding: 0px 5px;
}

.post-slider .post-wrapper .post .slider-image {
  width: 100%;
  height: 200px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/* end of carousel */


/* Media Queries */

@media only screen and (max-width: 750px) {
  header {
    position: relative;
  }
  header ul {
    width: 100%;
    background: #2d2a3e;
    max-height: 0px;
    display: none;
  }
  header ul .showing {
    max-height: 100em;
    display: block;
  }
  header ul li {
    width: 100%;
  }
  header ul li a {
    background: #2D283E;
  }
  header ul li a:hover {
    background: #181528;
    !important;
  }
  header ul li ul {
    position: static;
    display: block;
    width: 100%;
  }
  header ul li ul li a {
    background: #2D283E;
    color: white;
    padding: 10px 10px 10px 50px;
  }
  header ul li ul li a.logout {
    color: red;
  }
  header .menu-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 1.9em;
    color: white;
  }
  header .logo {
    margin-left: .5em;
  }
}

<!doctype html PUBLIC>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!--<meta http-equiv = "X-UA-Compatible" content = "ie=edge">-->

  <title>Blog</title>

  <!-- JQuery -->
  <!--<script type="text/javascript" src="js/jquery-3.6.0.js"></script>-->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

  <!-- Custom Styles -->
  <link rel="stylesheet" href="mystyle.css">

  <!-- Slick --->
  <!--<link rel = "stylesheet" href = "slick/slick.css">
    <link rel = "stylesheet" href = "slick/slick-theme.css">-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

</head>

<body>
  <header>
    <div class="logo">
      <h1 class="logo-text">
        PhosHouse<span>Tech</span>
      </h1>
    </div>
    <i class="fa fa-bars menu-toggle"></i>
    <ul class="nav">
      <li>
        <a href="#">Home</a>
        <!--<ul style="left: 0px;">
                <li><a href="#">Landing Page</a> </li>
                <li><a href="#">Team</a> </li>
            </ul>-->
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <!--<li><a href="#">Sign Up</a> </li>
        <li><a href="#">Login</a> </li>-->
      <li>
        <a href="#">
          <i class="fa fa-user"></i> PhosHouseTech
          <i class="fa fa-chevron-circle-down" style="font-size: .8em;"></i>
        </a>
        <ul>
          <li><a href="#">Dashboard</a></li>
          <li><a href="#" class="logout">Logout</a></li>
        </ul>
      </li>
    </ul>
  </header>

  <!----Carousel----->
  <div class="page-wrapper">

    <div class="post-slider">
      <h1 class="slider-title">Trending Posts</h1>
      <i class="fa fa-chevron-left prev "></i>
      <i class="fa fa-chevron-right next"></i>

      <div class="post-wrapper">
        <div class="post">
          <img src="https://ik.imagekit.io/badkmw/default-image.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4>
              <a href="single.html">
                Lorem ipsum dolor sit amet consectetur adipisicing elit Quaerat
              </a>
            </h4>
            <i class="fa fa-user"></i>badkmw &nbsp;
            <i class="fa fa-calendar"></i>May 12, 2022
          </div>
        </div>

        <div class="post">
          <img src="https://ik.imagekit.io/badkmw/default-image.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4>
              <a href="single.html">
                Lorem ipsum dolor sit amet consectetur adipisicing elit Quaerat
              </a>
            </h4>
            <i class="fa fa-user"></i>badkmw &nbsp;
            <i class="fa fa-calendar"></i>May 12, 2022
          </div>
        </div>

        <div class="post">
          <img src="https://ik.imagekit.io/badkmw/default-image.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4>
              <a href="single.html">
                Lorem ipsum dolor sit amet consectetur adipisicing elit Quaerat
              </a>
            </h4>
            <i class="fa fa-user"></i>badkmw &nbsp;
            <i class="fa fa-calendar"></i>May 12, 2022
          </div>
        </div>

        <div class="post">
          <img src="https://ik.imagekit.io/badkmw/default-image.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4>
              <a href="single.html">
                Lorem ipsum dolor sit amet consectetur adipisicing elit Quaerat
              </a>
            </h4>
            <i class="fa fa-user"></i>badkmw &nbsp;
            <i class="fa fa-calendar"></i>May 12, 2022
          </div>
        </div>

        <div class="post">
          <img src="https://ik.imagekit.io/badkmw/default-image.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4>
              <a href="single.html">
                Lorem ipsum dolor sit amet consectetur adipisicing elit Quaerat
              </a>
            </h4>
            <i class="fa fa-user"></i>badkmw &nbsp;
            <i class="fa fa-calendar"></i>May 12, 2022
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-----end of carousel------>

  <!-- Font Awesome -->
  <!--<script type="text/javascript" src = "font/js/all.js"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.js" integrity="sha512-AsoAG+OFcSvtqlspW166UTUYg7F4GEu0yNhzTIRfOGysIQA8Dqk1WZwyoN4eX6mX4DaSk703Q1iM0M47rw25Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- Slick -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!--<script type = "text/javascript" src = "slick/slick.min.js"></script>-->

  <!--Custom js -->
  <script type="text/javascript" src="js/myjs.js"></script>

</body>

</html>