How do I make my JavaScript know the index number of the post I want to delete?

This is the second question I'm asking about this capstone project!

For the project, I need to make it possible to delete and edit posts. I'm focusing on the delete part now, but I don't know where to start. I want to make it so I click the button on the post and it deletes the correct post based on the index number, but I don't know how to send the index of the post selected to the JavaScript?

Here's some of the code:

<% if ((locals.ptit)) {%>
    <% for (let index = 1 ; index < ptit.length; index++) { %>
        
    
    <div class="post">
        <h1><%= ptit[index] %></h1>
        <p><%= stuff[index] %></p>
    <form action="/delete" method="DELETE">
        <input type="submit" value="POST IS DONE" class="donebtn" name=index/>

    </form></div>
    <% } %>
    <% } %>

^ that is the EJS and v is the JS

app.delete("/delete" (req, res) => {
titles.push(req.body["puttit"]);
posts.push(req.body["posty"]);
res.render("blog.ejs", {
ptit: titles,
stuff: posts,
});
})

I've tried to search this to the best of my ability but I feel like I'm missing too much...

Solution

Simple answer. Try something like that:

        <form action="/delete" method="POST">
            <input type="hidden" name="index" value="<%= index %>" />
            <input type="submit" value="POST IS DONE" class="donebtn" />
        </form>

Then you should a POST request to /delete with index value in the payload. But there is a redirect to host/delete url as well.

Better solution is to use JS to manage the delete request:

blog.ejs:

<% for (let index=0; index < ptit.length; index++) { %>
    <div class="post">
        <h1>
            <%= ptit[index] %>
        </h1>
        <p>
            <%= stuff[index] %>
        </p>
        <form>
            <input type="hidden" name="index" value="<%= index %>" />
            <input type="submit" value="POST IS DONE" class="donebtn" />
        </form>
    </div>
    <% } %>

        <script>
            document.addEventListener('submit', function (event) {

                event.preventDefault();

                fetch('/delete', {
                    method: 'POST',
                    body: new FormData(event.target),
                })
            });
        </script>

expressjs server file:

const express = require('express');
const path = require('path');
//package for parsing form data
const { formidable } = require('formidable')

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

// Set the view engine to ejs
app.set('view engine', 'ejs');

// Set the views directory
app.set('views', path.join(__dirname, 'views'));

// Define a route to render the ejs template
app.get('/', (req, res) => {
    const titles = ["Home", "About", "Contact"];
    const posts = ["Welcome to my blog!", 'This is a blog post', 'Another blog post'];
    res.render("blog.ejs", {
        ptit: titles,
        stuff: posts,
    });
});

app.post("/delete", (req, res) => {
    const form = formidable({});

    form.parse(req, (err, fields) => {
        console.log(fields);
        // delete the post
        res.send("Deleted");
    });

})

// Start the server
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});