betterthanyouthink

поправьте условие в цикле на i < mas.length

1) Выбираете элемент на который у вас задан :hover, жмете :hov:

2) Выбираете псевдоэлемент в разметке и жмете computed:

У вас deleteBtn лежит на одном уровне с <li>. Положите её внутрь и будет вам счастье :)
исправьте todoList.append(deleteBtn); на newTask.append(deleteBtn);

Element.closest()

const header = document.querySelector(".header");
window.addEventListener("scroll", function(){
	window.pageYOffset > 100 ? header.classList.add('sticky') : header.classList.remove('sticky')
});

C помощью класса sticky стилизуете шапку как вам нужно. Условно

.header { height: 100px;} 
.header.sticky {height: 50px}

Для плавности не забывайте добавить transition.

можешь попробовать накинуть backdrop-filter на шапку
e.g. backdrop-filter: blur(10px);

Это решит проблему "смешивания", но смотрите поддержку
https://caniuse.com/css-backdrop-filter

допишите .done() после $.get и выводите console.log там

https://api.jquery.com/jquery.get/

Я бы посоветовал вам накинуть на каждый элемент data аттрибут, либо класс.

<div class="name">
     <div class="1" data-toggle>1</div>
     <div class="2" data-toggle>2</div>
</div>
<div class="bloc">
     <div class="1-bloc" data-toggle>1</div>
     <div class="2-bloc" data-toggle>2</div>
</div>

$('[data-toggle]').hover(function (e){
  $(this).toggleClass("active");
});

Окей.. спустя 3 минуты после своего вопроса я понял в чем дело :D Удалять не буду, может кому поможет в будущем. Эта проблема возникает из-за того, что в компиляции у меня стоит Autoprefix.. он и портит всю нумерацию. Теперь я буду добавлять Autoprefix при компиляции css -> min.css.