<div class="items"></div>

<div class="form">
  <form action="">
    <h2>Название статьи</h2>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button class="saveButton" type="button">Сохранить и Закрыть</button>
  </form>
  <div class="closeEdit">
    <img src="https://www.frakinstore.com/images/theme_icons/close-btn-ico.svg" alt="">
  </div>
</div>

.pencill {
  position: absolute;
  top: 20px;
  right: 20px;
  transition: 0.1s linear;
  cursor: pointer;
}

.pencill img {
  display: block;
  width: 20px;
}

.pencill:hover {
  transform: scale(1.1);
}

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s cubic-bezier(0, 0.95, 0.81, 0.06);
}

.vision_form {
  transform: translate(-50%, -50%) scale(1);
}

.form textarea,
.form button {
  display: block;
  margin-top: 20px;
  resize: none;
}

form {
  padding-left: 10px;
}

.closeEdit {
  transition: 0.2s linear;
  position: absolute;
  top: 30px;
  right: 30px;
}

.closeEdit:hover {
  transform: scale(1.1);
}

.closeEdit img {
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

let db = [
  {
    id: "text1",
    name: "Name1",
    text: "lorem1",
    time: "02:03:2021"
  },
  {
    id: "text2",
    name: "Name2",
    text: "lorem2",
    time: "03:05:2021"
  },
  {
    id: "text3",
    name: "Name3",
    text: "lorem3",
    time: "08:12:2021"
  }
];

const form = document.querySelector(".form");
let accum = "";

db.forEach(function (values) {
  accum += `<div data-id="${values.id}" class="item" style="position: relative">
       <div class="article">
         <h2>${values.name}</h2>
         <p>${values.text}</p>
         <span class="time">${values.time}</span>
       </div>
       <div class="pencill">
        <img src="https://www.clipartmax.com/png/full/82-825182_this-free-icons-png-design-of-gray-pencil-icon-gray-pencil.png" alt="">
       </div>
     </div>`;
});

document.querySelector(".items").innerHTML = accum;

document.querySelector(".closeEdit").onclick = closeForm;

document.querySelector(".saveButton").onclick = function () {
  saveValue();
  closeForm();
};

document.querySelectorAll(".pencill").forEach(function (icon) {
  icon.onclick = function () {
    form.classList.add("vision_form");
    setFormValues(icon);
  };
});

function closeForm() {
  form.classList.remove("vision_form");
  form.removeAttribute("data-item-id");
}
/**
 * @description - Обновляем данные в массиве db
 */
function saveValue() {
  const textarea = form.querySelector("textarea");
  const id = form.getAttribute("data-item-id");
  const index = db.findIndex((obj) => obj.id == id);

  db[index].text = textarea.value;

  updateItemText(id, textarea.value);
}
/**
 * @param {String} id - айди записи
 * @param {String} value - текст, который мы хотим обновить в DOM
 */
function updateItemText(id, value) {
  const textEl = document.querySelector(`[data-id=${id}] p`);
  textEl.innerText = value;
}
/**
 * @param {HtmlElement} icon - иконка редактирования
 */
function setFormValues(icon) {
  const id = icon.closest("[data-id]").getAttribute("data-id");
  const item = db.filter((i) => i.id == id);
  const textarea = form.querySelector("textarea");
  // Добавляем форме атрибут с id редактируемой записи, чтобы потом при сохранении, можно было
  // понять, какую запись редактируем
  form.setAttribute("data-item-id", id);
  textarea.value = item[0].text;
}