I have code to create simple Web Sticky Note with feature:

  1. Add note
  2. edit note
  3. delete note

Here’s the Code (it’s not eye catching, just simple notes):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Notes</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .close {
      cursor: pointer;
    }

    .btn {
      margin-top: 35px;
      margin-left: 35px;
    }

    .form,
    .edit-form {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4);
    }

    .form-content,
    .edit-form-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 18%;
    }

    .add-notes,
    .to-edit {
      background-color: #51a755;
      border: 1px solid rgb(41, 32, 32);
      color: #fff;
      width: 100px;
      height: 50px;
    }

    .notes {
      display: inline-block;
      border: 1px solid rgb(202, 197, 197);
      margin-left: 35px;
      margin-top: 35px;
      padding: 25px;
      width: 15%;
    }
  </style>
</head>

<body>
  <!-- Modal Button -->
  <button class="btn btn-primary" id="popup-btn">Add Notes</button>

  <!-- Form to Create Notes -->
  <div class="form">
    <div class="form-content">
      <h2>Add Notes</h2>
      <label for="note-title">Note Title:</label>
      <input type="text" id="note-title" name="note-title"><br>
      <label for="note-content">Notes</label><br>
      <textarea name="note-content" id="note-content" cols="30" rows="10"></textarea>
      <button class="btn btn-primary add-note">Add Notes</button>
      <button class="btn btn-danger close-note">Close</button>
    </div>
  </div>

  <!-- Edit Note -->
  <div class="edit-form">
    <div class="edit-form-content">
      <h2>Edit Notes</h2>
      <label for="edit-note-title">Note Title:</label>
      <input type="text" id="edit-note-title" name="edit-note-title"><br>
      <label for="edit-note-content">Notes</label><br>
      <textarea name="edit-note-content" id="edit-note-content" cols="30" rows="10"></textarea>
      <button class="btn btn-primary edit-note">Edit Notes</button>
      <button class="btn btn-danger close-note">Close</button>
    </div>
  </div>

  <!-- Note -->
  <main class="note-group">
    <div class="notes">
      <span class="close">x</span>
      <h2 class="note-title">List Belanja</h2>
      <p class="note-text">Wortel, royco, indomie, siomay, nugget, ikan, telur, beras</p>
      <button class="to-edit">Edit Note</button>
    </div>
    <div class="notes">
      <span class="close">x</span>
      <h2 class="note-title">UH Minggu Depan</h2>
      <p class="note-text">Tekweb || 13:30 - 16:00 || HTML - jQuery</p>
      <button class="to-edit">Edit Note</button>
    </div>
    <div class="notes">
      <span class="close">x</span>
      <h2 class="note-title">Must buy Games</h2>
      <p class="note-text">New World (Steam) dan Guild Wars 2 (Anet)</p>
      <button class="to-edit">Edit Note</button>
    </div>
  </main>

  <script>
    $(document).ready(function () {
      $("#popup-btn").on("click", function () {
        $(".form").show();
      });
      $(".close-note").on("click", function () {
        $(this).parent().parent().hide();
      });
      $(".add-note").on("click", function (e) {
        e.preventDefault();
        var title = $("#note-title").val();
        var texts = $("#note-content").val();
        var $input = $('<div class="notes"> <p class="close">x</p> <h2>' + title + '</h2> <p>' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');
        $input.appendTo($(".note-group"));
        $(".form").hide();
      });
      $(".note-group").on("click", ".close", function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
      });
      $(".note-group").on("click", ".to-edit", function (e) {
        e.preventDefault();
        $(".edit-form").show();
        var curTitle = $(this).parent().find(".note-title").text();
        var curText = $(this).parent().find(".note-text").text();
        $("#edit-note-title").val(curTitle);
        $("#edit-note-content").val(curText);
        $(this).parent().remove();
      });
      $(".edit-note").on("click", function (e) {
        e.preventDefault();
        var title = $("#edit-note-title").val();
        var texts = $("#edit-note-content").val();
        var $input = $('<div class="notes"> <p class="close">x</p> <h2>' + title + '</h2> <p>' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');
        $input.appendTo($(".note-group"));
        $(".edit-form").hide();
      })
    });
  </script>

</body>

</html>

if I precoded the code, the modal popup will read the current title and text. But if the notes are from the add note function, the modal popup wont read it at all. So I’m curios, where did I go wrong. Would appreciate if you can find me the problem. THX!