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

<div class="form">
  <div>
    <h2>Название статьи</h2>
    <input name="title" type="text">
    <br>
    <textarea name="body" cols="30" rows="10"></textarea>
    <br>
    <button type="button">Сохранить и Закрыть</button>
    <div class="closeEdit">
      <img src="https://www.frakinstore.com/images/theme_icons/close-btn-ico.svg" alt="">
    </div>
    </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;
}

const 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 render = () => {
  document.querySelector(".items").innerHTML = db.reduce(
    (acc, values) =>
      acc +
      `
      <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>
    `,
    ""
  );
};

// elements
const form = document.querySelector(".form");
const titleInput = form.querySelector("input[name=title]");
const bodyInput = form.querySelector("textarea[name=body]");
const saveButton = form.querySelector("button");
const closeEdit = form.querySelector("div.closeEdit");

const visibleClassName = "vision_form";
const showForm = () => form.classList.add(visibleClassName);
const hideForm = () => form.classList.remove(visibleClassName);

let editedId; // кого редактируем?
const findById = (id) => db.filter(({ id: dbId }) => dbId === id)[0];

document.querySelector("div.items").addEventListener("click", ({ target }) => {
  const div = target.closest("div.pencill");
  if (!div.classList.contains("pencill")) return;
  editedId = div.parentElement.dataset.id;
  const data = findById(editedId);
  titleInput.value = data.name;
  bodyInput.value = data.text;

  showForm();
});

saveButton.addEventListener("click", () => {
  const data = findById(editedId);
  data.name = titleInput.value;
  data.text = bodyInput.value;
  hideForm();
  render();
});

closeEdit.addEventListener("click", hideForm);

render();