<!DOCTYPE html>
<html>
<style>
div {
position: relative;
}
.group {
border: 1px solid green;
margin: 20px 10px;
}
.check-text {
height: 20px;
width:200px;
border: 1px solid red;
margin: 5px 0;
}
.list-container {
border: 1px solid blue
}
</style>
<body>
<!-- Весь список check-листов -->
<section id="lists">
<!-- Первая группа check-листов -->
<div class="group">
<div class="list">
<div class="list-container">
<input type="checkbox"><div class="check-text" contenteditable></div>
</div>
</div>
<div class="list">
<div class="list-container">
<input type="checkbox"><div class="check-text" contenteditable></div>
</div>
</div>
</div>
<!-- Вторая группа check-листов -->
<div class="group">
<div class="list">
<div class="list-container">
<input type="checkbox"><div class="check-text" contenteditable></div>
</div>
</div>
<div class="list">
<div class="list-container">
<input type="checkbox"><div class="check-text" contenteditable></div>
</div>
</div>
</div>
<!-- ... Следующая группа check-листов и т.д. -->
</section>
<script>
//функция, которая создает новый див
function enterCheck(e) {
//создаем новый див
let div = document.createElement('div');
//добавляем ему класс
div.classList.add('list');
//наполняем шаблоном списка
div.innerHTML = `
<div class="list-container">
<input type="checkbox"><div class="check-text" contenteditable></div>
</div>
`;
//перемещаемся на несколько дивов наверх (к началу текущего дива)
//и добавляем после него созданный div
e.parentNode.parentNode.after(div);
setEvents(div); // Устанавливаваем обработчики на новый блок !!!
//устанавливаем на .check-text созданного дива focus()
//чтобы в нем можно было сразу вводить текст
setTimeout (() => div.querySelector('.check-text').focus(), 0); // focus лучше через setTimeout
}
function setEvents(e) {
// e.addEventListener('focus', function(){ --- Лишнее это наверно
//когда в нём нажимаются клавиши
e.addEventListener('keypress', function(event){
//когда нажата Enter
if(event.keyCode === 13){ // Нет keyPress !!!
//отменяем стандартное поведение(перенос строки)
event.preventDefault();
//если текущий блок не пустой, то добавляем новый сразу после него
if(this.innerText !== '') {
enterCheck(this);
}
}
});
// });
}
//собираем массив всех checkText'ов
let checkTexts = document.querySelectorAll('.check-text');
//перебираем этот массив
checkTexts.forEach(e => setEvents(e))
//когда сфокусирован на определенном checkText
</script>
</body>
</html>
1. if(event.keyPress === 13){ - не существует keyPress
2 Вы не устанавливаете слушатели событий на вновь созданные элементы
3 установка focus() сразу, почему то обычно не срабатывает. Лучше ее делать с нулевой задержкой черед setTimeout
4 Зачем ждать события focus, что бы поставить обработчик на keypress, я не понял. Почему не сразу?