Genri_Rus

https://codepen.io/notiv/pen/vYYwmJP

steps(12) кол-во кругов, учитывая что они равноудалены

Как вариант:
для .wrapper задать overflow: hidden;
для .title — position: relative;
и

.title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  border-bottom: 5px solid #000;
}

-webkit-box-reflect: right;
В класс title.

Заработает)

Можно так попробовать, но в целом у меня глаза болят от такой реализации

странная логика заложена у вас.

1. контейнер для таймер можно/нужно добавить в нужное место в HTML, а не добавлять каждый раз по клику, либо добавлять его по условию (что он еще не создан).

2. вы безусловно добавляете элементы, а потом лишнее удаляете, зачем?

3. зачем-то создали специально объект, хотя можно просто работать с массивом и удалять его элементы, массив это тот же объект.

const items = [];
items["one"]=1;
items["two"]=1;
if(items["one"]) console.log("Есть"); else console.log("Нет");
delete items["one"];
if(items["one"]) console.log("Есть"); else console.log("Нет");

// либо
items["one"]=0;
if(items["one"]) console.log("Есть"); else console.log("Нет");

4.

Мне нужно сделать так, что если человек постоянно кликает по кнопке, то обновлять таймер

у вас собственно вообще нет обработки повторного клика на туже кнопку, вместо этого у вас
удаление излишне созданного контейнера, т.к. он выше добавляется безусловно:

if (index > 0) {
          $(this).remove();
       }

и возврат из обработчика если есть элемент (т.е. ранее был клик):
if (items[name]) return;

5. для возобновления таймера, вам надо написать обработчик повторного нажатия а не выходить из обработчика по условию
if (items[name]) return;

т.е. так:

if (items[name]) {
// остановка анимации таймера и запуск заново
} else {
// код первого запуска таймера.
}

остановка анимации, см. метод .stop

вообще код запуска таймера можно вынести в отдельную функцию, т.к. он скорее всего будет одинаков как для первичного запуска, так и для повторного запуска.

как-то так.

UPDATE:

Если минимально изменять ваш код, то вам нужно при повторном нажатии на кнопку и до выхода из .notice each перезапускать таймер. Сделать это можно с помощью метода stop(), очистки ширины полоски и нового запуска анимации. Вот пример. Обратите внимание на строку 20-21 скрипта.
Но вообще, я бы вам посоветовал создание полоски загрузки вынести в отдельную функцию, и вызывать её для создания и перезапуска анимации.
А еще, я полагаю, вы пытаетесь сделать что-то вроде этого (нажмите синюю кнопку show toastr). Можете поставить там галочку Progress Bar чтобы увидеть полоску загрузки.

Потому что вот:

$('.notice').each(function(index, value) {
       if (index > 0) {
          $(this).remove();
       }
...

При каждом нажатии на кнопку идёт проверка количества объектов с классом .notice и удаление тех, которые имеют index больше 0. Более поздние объекты просто удаляются.

Кешировать вывод где-нибудь.
Примерно так:

window.my_cache = window.my_cache || {};
if (my_cache[items[i].name]) continue; // or return if inside a function
my_cache[items[i].name] = true;

Можно навести красоту и оптимизировать под разные хотелки, если есть нужда.

Я бы так, например:

.info-slider
.info-slider__item
.info-slider__item-photo
.info-slider__item-photo-preview или .info-slider__item-preview
.info-slider__item-name

Можно короче:

.info-slider
.info-slider__item
.info-slider__photo
.info-slider__preview
.info-slider__name

• В аттрибут src элемента script нельзя записывать массив!
  
• Вы передаете два параметра (адреса), соответственно необходимо создать два элемента script и оба добавить в body
  

как-то так:

function loadScripts(arrScr) {
  arrScr.forEach((src) => {
    var scr = document.createElement('script');
    scr.src = src;
    document.body.appendChild(scr);
  })
}

if (window.location.href.indexOf('index') != -1) {
     loadScripts(['js/scripts.js', 'js/scripts2.js']);
}

Дело в том что у вас проверка email выполняется только в том случае если не выполняется условие по имени:

if ($('#name').val().length >= 3) {
      $(this).find('#name').css("border", "1px solid rgb(169, 169, 169)");
  } else if ($('#email').val().length > 10 && $('#email').val().search(pattern) == 0) {
    $(this).find('#email').css("border", "1px solid rgb(169, 169, 169)");
  }

else if

надо без else, тогда оба условия будут проверяться независимо.

if ($('#name').val().length >= 3) {
    $(this).find('#name').css("border", "1px solid rgb(169, 169, 169)");
}
if ($('#email').val().length > 10 && $('#email').val().search(pattern) == 0) {
    $(this).find('#email').css("border", "1px solid rgb(169, 169, 169)");
}

и т.д.

Привет!
Вместо строчки while(sameHeight(this) && fontSizeDown == 0)
попробуй поставить while(sameHeight(this) && fontSizeDown < 10)
10 - размер шрифта, который нужен