HTTP PATCH and DELETE requests not working in EJS project

Question

I can't get these PATCH and DELETE requests to work. I've tried so many different things, the PATCH request is currently returning 'Cannot GET /edit/save/1' and the DELETE request is returning 'Cannot GET /delete/1'.

I also haven't set up my route to view an existing post because I believe I would need to turn the div containing each blog post into a button to give it an endpoint.

I am able to create a new post and go to the edit page on an existing post.

This is what's in my index.js file:

import express from "express"

const app = express();
const port = 3000;

app.use(express.urlencoded ({ extended: true }));

app.use(express.static("public"));

app.set('view engine','ejs');

// posts

let posts = [
  {
    id: 1,
    title: "Test Post",
    copy: "Here we share our Content Guidelines and tips for success.",
  },
]

// render homepage

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

// route to view post

app.get("/:id([0-9]+)", (req, res) => {
  const id = parseInt(req.params.id);
  const foundPost = posts.find((post) => post.id === id);
  if (!foundPost) return res.status(404).json({message: "Post not found"});
  res.json(foundPost);
});

// route to create new post

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

// route to save new post

app.post("/save", (req, res) => {
  const newPost = {
    id: posts.slice(-1)[0].id +1,
title: req.body.newTitle,
copy: req.body.newCopy,
  }
  posts.push(newPost);
    res.redirect("/");
  });

// route to edit existing post

  app.get("/edit/:id", (req, res) => {
    const id = parseInt(req.params.id);
    const foundPost = posts.find((post) => post.id === id);
    if (!foundPost) {
      return res.status(404).json({message: "Post not found"});
      res.redirect;
    } else {
    res.render("edit.ejs", {foundPost});
    }
  });

  // route to save edited post

app.post("edit/save/:id", (req, res) => {
  const id = parseInt(req.params.id);
  var foundPost = posts.find((post) => post.id === id);
  if (!foundPost) return res.status(404).json({message: "Post not found"});
  const updatedPost = {
    id: foundPost.id,
    title: req.body.title || foundPost.title,
    copy: req.body.copy || foundPost.copy,
      };
  foundPost = updatedPost;
  console.log(foundPost);
  console.log(updatedPost);
  // res.json(foundPost);
  // res.redirect("/");
});

// route to delete post

app.delete("/:id", (req, res) => {
  const id = parseInt(req.params.id);
  const searchIndex = posts.findIndex((post) => post.id === id);
  if (searchIndex > -1) {
    posts.splice(searchIndex, 1);
    res.sendStatus(200).json({message: "Post deleted"});
  } else {
    res
      .status(404)
      .json({ error: `Post not found. No posts were deleted.` });
  }
});

app.listen(port, () => {
    console.log("Listening on port " + port);
});

And here is my edit.ejs:

<%- include("partials/header.ejs") %>

<% if (locals.foundPost) { %>
    <form id="editForm" method="PATCH" action="save/<%=foundPost.id%>">
      <container class="new-blog">
      <input class="title-box" type="text" name="title" value="<%=foundPost.title %>">
      <textarea class="edit-box" id="copy" name="copy" rows="10"><%=foundPost.copy %></textarea>
      <input class="btn" type="submit" value="Update">
    </container>
    </form>
    <% } else {%>
        <% return res.status(404).json({message: "Post not found"}); %>
      <% } %>

      <%- include("partials/footer.ejs") %>

My DELETE route is configured as this in my index.ejs file:

<a class="delete" href="/delete/<%= post.id %>">Delete</a>

I've tried playing around with the endpoints or using a POST request for the PATCH route but just can't get it to work.

Can anyone help?