How to create a item in the Todo list

When you make a new item on the todo list it makes a new row but when you make a second one instead of making a new item on the todo list it changes the previous one. How would you go around making a new item on the list?

Backend JS:

import express from "express";
import bodyParser from "body-parser";

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


app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

app.listen(port, (req, res) => {
    console.log(`website is online at ${port}.`)
});

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

app.post("/items", (req, res) => {
    let data = {
        task: req.body.padText   
    };
    res.render("index.ejs", data);
});

The EJS file where the new item will be made. Also the new items on the todo list should be inside the .pad div. Right under the place where you submit items for the todo list.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLOGGERS</title>
    <link rel="stylesheet" href="/styles/styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap" rel="stylesheet">

</head>
<body>
    <div class="navBox">
        <nav>
            <p id="headerText">
                BLOOGERS
            </p>
        </nav>
    </div>
    <div class="container">
        <div class="pad">
            <form class="rowContainer" action="/items" method="POST">
            <input class="inputBox" placeholder="New post to the ol pad..." type="text" name="padText" required>
            <button type="submit">+</button>
            </form>
            <% if (locals.task) { %>
                <div class="rowContainer2">
                    <input class="inputBox" value="<%= task %>" type="text" required>
                    <button class="delButton">del</button>
                </div>
                <% } %>
                        
        </div>
        
    </div>
    <footer>
        <p>IKM © 2024</p>
    </footer>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="/index.js" charset="UTF-8"></script>

    
</body>
</html>

I really don't know what I'm doing tbh but I tried a bunch of stuff like trying to use local storage and some other things which lead to nowhere. I'd like to keep the code that makes the new item on the todo list only on the ejs file and/or the backend js file. If you think you can remotely help me please put a message. Also if there's something i messed up with the stackoverflow question tell me because this is my first time using this.

Solution

A few revisions in the code shown below. Please see it.

a) In the server side, the new tasks to be added to the existing list. Therefore the following statement is to be reviewed as shown below.

let data = {
    task: req.body.padText   
};

code reviewed.

  task = [...task, req.body.padText];

b) In the template, it is to address multiple tasks. Therefore the following statement also requires review as shown below.

**  <% if (locals.task) { %>
<div class="rowContainer2">
   <input class="inputBox" value="<%= task %>" type="text" required>
   <button class="delButton">del</button>
</div>
<% } %>**

Code reviewed.

<div class="rowContainer2">
  <% task?.forEach((t)=>{ %>
  <input class="inputBox" value="<%= t %>" type="text" required />
  <button class="delButton">del</button>
  <br />
<% }) %>
</div>

A full-listing of the revised server side code shown below. The template requires only one change as mentioned above.

server.js

import express from 'express';
import bodyParser from 'body-parser';
import ejs from 'ejs';

const app = express();
app.engine('ejs', ejs.__express);
app.set('views', './public');
app.set('view engine', 'ejs');
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.listen(port, (req, res) => {
  console.log(`website is online at ${port}.`);
});

let task =  []; //task list
app.get('/', (req, res) => {
  res.render('index', { task: [] }); //on load, no task
});

app.post('/items', (req, res) => {
  task = [...task, req.body.padText]; //adding the new task to the task list
  res.render('index', {
    task: task,
  });
});