diff --git a/index.html b/index.html
index e660a61fa..ac1e595ec 100644
--- a/index.html
+++ b/index.html
@@ -43,64 +43,66 @@
         data: new Date(2022, 1, 12, 12, 18),
         text: "Это будет первый комментарий на этой странице",
         likesCounter: 3,
-        isLiked: true
+        isLiked: true,
       },
       {
         name: "Варвара Н.",
         data: new Date(13, 2, 22, 19, 22),
         text: "Мне нравится как оформлена эта страница! ❤",
         likesCounter: 75,
-        isLiked: true
+        isLiked: true,
       },
     ];
 
-    function like() {
+    function addLikeHandlers() {
       let likeButtons = document.querySelectorAll(".like-button");
       let likesCounter = document.querySelectorAll(".likes-counter");
 
       likeButtons.forEach((button) => {
-        button.addEventListener("click", () => {
+        button.addEventListener("click", (event) => {
+          event.stopPropagation();
           let index = button.dataset.index;
 
-            if (comments[index].isLiked === true) {
-              comments[index].isLiked = false
-              comments[index].likesCounter--;
-            } else {
-              comments[index].isLiked = true
-              comments[index].likesCounter++;
-            }
+          if (comments[index].isLiked === true) {
+            comments[index].isLiked = false;
+            comments[index].likesCounter--;
+          } else {
+            comments[index].isLiked = true;
+            comments[index].likesCounter++;
+          }
 
-          renderComment();
+          renderComments();
         });
       });
     }
 
-    function renderComment() {
-      let commentElement = comments
+    function renderComments() {
+      let commentElements = comments
         .map((comment, index) => {
-          return `<li class="comment">
-            <div class="comment-header">
-              <div class="comment-header__name">${comment.name}</div>
-              <div class="comment-header__date">${getFormattedDate(comment.data)}</div>
-            </div>
-            <div class="comment-body">
-              <div class="comment-text">${comment.text}</div>
-            </div>
-            <div class="comment-footer">
-              <div class="likes">
-                <span class="likes-counter" >${comment.likesCounter}</span>
-                <button class="like-button ${comment.isLiked ? '-active-like' : ''}" data-index=${index}></button>
-              </div>
-            </div>
-          </li>`;
+          return `<li class="comment" data-id=${index}>
+                <div class="comment-header">
+                  <div class="comment-header__name">${comment.name}</div>
+                  <div class="comment-header__date">${getFormattedDate(comment.data)}</div>
+                </div>
+                <div class="comment-body">
+                  <div class="comment-text">${comment.text}</div>
+                </div>
+                <div class="comment-footer">
+                  <div class="likes">
+                    <span class="likes-counter" >${comment.likesCounter}</span>
+                    <button class="like-button ${comment.isLiked ? "-active-like" : ""}" data-index=${index}></button>
+                  </div>
+                </div>
+              </li>`;
         })
         .join("");
 
-      commentsBox.innerHTML = commentElement;
-      like();
+      commentsBox.innerHTML = commentElements;
+      addCopyCommentToFormHandlers();
+      addLikeHandlers();
     }
 
-    renderComment();
+    renderComments();
 
     function getFormattedDate(date) {
       let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
@@ -109,7 +111,8 @@
           ? "0" + (date.getMonth() + 1)
           : date.getMonth() + 1;
       let year = date.getFullYear() % 100;
-      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      let hours =
+        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
       let minutes =
         date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
       return `${day}.${month}.${year} ${hours}:${minutes}`;
@@ -124,20 +127,56 @@
         return;
       }
 
-      let commentElement = {};
+      let comment = {};
 
-      commentElement.name = nameValue;
-      commentElement.data = new Date();
-      commentElement.text = commentValue;
-      commentElement.likesCounter = 0;
+      comment.name = fixText(nameValue);
+      comment.data = new Date();
+      comment.text = fixText(commentValue);
+      comment.likesCounter = 0;
 
-      comments.push(commentElement);
+      comments.push(comment);
 
-      renderComment();
+      renderComments();
 
       formComment.value = "";
       formName.value = "";
     });
 
+    function fixText(text) {
+      return text
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+    }
+
+    function humanizeText(text) {
+      return text
+        .replaceAll("&amp;", "&")
+        .replaceAll("&lt;", "<")
+        .replaceAll("&gt;", ">")
+        .replaceAll('&quot;', '"')
+        .replaceAll("&#39;", "'");
+    }
+
+    function addCopyCommentToFormHandlers() {
+      let commentsEl = document.querySelectorAll(".comment");
+
+      for (let commentEl of commentsEl) {
+        function copyCommentToForm() {
+          console.log(commentEl);
+          let index = commentEl.dataset.id;
+
+          formComment.value =
+            "Ответ на комментарий: " +
+            humanizeText(comments[index].text) +
+            " Автор: " +
+            humanizeText(comments[index].name);
+        }
+
+        commentEl.addEventListener("click", copyCommentToForm);
+      }
+    }
   </script>
 </html>