JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dynamic Notes App</title>
  <meta name="description" content="A simple JavaScript dynamic list app that lets you add, remove, and manage notes in real time.">

  </head>
<body>
   <body>

  <p style="max-width: 1000px; margin: 0 auto 20px; font-size: 16px; line-height: 1.6; padding: 0 20px;">
    A <a href="https://flatcoding.com/projects/javascript-dynamic-list-add-or-remove-items-in-js/">JavaScript dynamic list</a> lets you add, remove, or change items in real time without reloading the page.
    You can use an HTML form to collect user input, then update the list by changing the DOM with JavaScript.
    Behind the scenes, you store the list items in an array. Each time you update the list, you also update the array.
    This keeps the display and the data in sync. In the following part, you will see how to build this step by step using
    basic HTML, JavaScript, and event listeners.
  </p>

  <div class="container">
    <!-- Form to add a new note -->
    <div class="form-section">
      <h2>Add a New Note</h2>
      <form id="noteForm">
        <label>Title:</label>
        <input type="text" id="noteTitle" required>
        <label>Note:</label>
        <textarea id="noteText" rows="5" required></textarea>
        <button type="submit">Add a new item</button>
      </form>
    </div>

    <!-- Section to display added notes -->
    <div class="notes-section">
      <h2><span id="noteCount">0</span> Notes Added</h2>
      <div id="notesContainer"></div>
    </div>
    
     
  </div>

<p style="max-width: 1000px; margin: 0 auto 20px; font-size: 16px; line-height: 1.6; padding: 0 20px;">
Navigate to <a href='https://flatcoding.com/'>FlatCoding</a> to see more JavaScript tutorials and project.
</p>
</body>
</html>

CSS

*, *::after, *::before {
        box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
      background-color: #f4faff;
      display: block;
      justify-content: center;
      padding: 40px;
    }

    .container {
      display: flex;
      gap: 40px;
      width: 100%;
      max-width: 1000px;
    }

    .form-section, .notes-section {
      background-color: white;
      padding: 24px;
      border-radius: 16px;
      flex: 1;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .form-section h2, .notes-section h2 {
      margin-bottom: 20px;
    }

    .form-section input, .form-section textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 16px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 16px;
    }

    .form-section button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      background-color: #111827;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .note-card {
      background-color: #f9f9f9;
      padding: 16px;
      border-radius: 12px;
      margin-bottom: 16px;
      position: relative;
    }

    .note-card h3 {
      margin: 0 0 8px;
    }

    .note-card p {
      margin: 0;
    }

    .note-actions {
      position: absolute;
      top: 16px;
      right: 16px;
    }

    .note-actions a {
      margin-left: 10px;
      font-size: 14px;
      cursor: pointer;
      color: #007bff;
      text-decoration: none;
    }

    .note-actions a.delete {
      color: #e53935;
    }

JavaScript

const noteForm = document.getElementById('noteForm');
    const notesContainer = document.getElementById('notesContainer');
    const noteCount = document.getElementById('noteCount');

    let count = 0;

    noteForm.addEventListener('submit', function(e) {
      e.preventDefault();

      const title = document.getElementById('noteTitle').value.trim();
      const text = document.getElementById('noteText').value.trim();

      if (title && text) {
        count++;
        noteCount.textContent = count;

        const noteCard = document.createElement('div');
        noteCard.className = 'note-card';

        noteCard.innerHTML = `
          <div class="note-actions"> 
            <a href="#" class="delete">Delete</a>
          </div>
          <h3 class='titlecls'>${title}</h3>
          <p class='notecls'>${text}</p>
        `;

        // Handle delete
        noteCard.querySelector('.delete').addEventListener('click', function () {
          notesContainer.removeChild(noteCard);
          count--;
          noteCount.textContent = count;
        });
        
        // Append note
        notesContainer.appendChild(noteCard);
        noteForm.reset();
      }
    });