Как повесить MutationObserver на мой скрипт?

Ну, нужно подебажить.

let span = document.querySelectorAll(".yith-wcwl-items-count");

спаны нужно перезапрашивать. я думаю
перед циклом в debugger;

Как сверстать такой элемент?

Exci84, https://bezramok-tlt.ru/blog/posts/slick-slider-us...
посмотри события которые происходят, внизу страницы. За события переходов можно зацепиться

Как сверстать такой элемент?

Exci84, вот это вот:

$('.класс в котором лежит итемt').on('click', '.класс итема', function () {

лучше замени на нативное в html

<div onclick="$('.класс слайдера').slick('slickGoTo', 0);">ссылка на 1 слайд</div>
<div onclick="$('.класс слайдера').slick('slickGoTo', 1);">ссылка на 1 слайд</div>
<div onclick="$('.класс слайдера').slick('slickGoTo', 2);">ссылка на 1 слайд</div>
<div onclick="$('.класс слайдера').slick('slickGoTo', 3);">ссылка на 1 слайд</div>

не лучший вариант, но так хотябы через год будет проще найти что за чем следует, а то элемент в одном месте, подписываешься на событие в другом месте, слайдер в третьем))

Как реализовать hover для следящего элемента?

valgerofficial, на почту отправил

Как реализовать hover для следящего элемента?

valgerofficial, сейчас не успею, на выходных если терпит, можно в личку напомнить))

Как реализовать hover для следящего элемента?

valgerofficial, самый простой вариант добавить технический класс на элемент который представляет из себя область, в котором эти элементы. Если курсок в этой области - то делать кружок, если нет - скрывать)

Как реализовать hover для следящего элемента?

valgerofficial, Тогда немного сложнее, если этот элемент всегда находится под курсором - то и hover срабатывает на нём. Вам кажется что hover должен на ссылке, но между ссылкой и курсором стоит вспомогательный элемент.

Активная и не ативная кнопка?

parsifaly, c checkbox значит проблема, сталкивался с такой проблемой, вот тут можно посмотреть
https://stackoverflow.com/questions/8206565/check-...

Активная и не ативная кнопка?

Сергей delphinpro, Вот да)) Постоянно про него забываю

Как реализовать hover для следящего элемента?

valgerofficial, у вас элемент двигается вместе с курсором?

Как анимировать блоки?

Максим Иванов, вариаций с формами разных много, можно сделать например блок с overflow, и при переключении формы, старая уезжает влево, новая появляется справа. так же сочетание JS+CSS, основа на overflow, absolut, transition ставится на left. Тут только практика и насмотренность поможет)))

Как анимировать блоки?

Максим Иванов, проще анимировать можно)) но если анимацию другого плана использовать

Как анимировать блоки?

Максим Иванов, вот этот код окутать в контейнер

<div class="tab">Name:
    <p><input placeholder="First name..." name="fname"></p>
    <p><input placeholder="Last name..." name="lname"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." name="email"></p>
    <p><input placeholder="Phone..." name="phone"></p>
  </div>
  <div class="tab">Birthday:
    <p><input placeholder="dd" name="dd"></p>
    <p><input placeholder="mm" name="nn"></p>
    <p><input placeholder="yyyy" name="yyyy"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." name="uname"></p>
    <p><input placeholder="Password..." name="pword" type="password"></p>
  </div>

получится:

<div id="form-container">
<div class="tab">Name:
    <p><input placeholder="First name..." name="fname"></p>
    <p><input placeholder="Last name..." name="lname"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." name="email"></p>
    <p><input placeholder="Phone..." name="phone"></p>
  </div>
  <div class="tab">Birthday:
    <p><input placeholder="dd" name="dd"></p>
    <p><input placeholder="mm" name="nn"></p>
    <p><input placeholder="yyyy" name="yyyy"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." name="uname"></p>
    <p><input placeholder="Password..." name="pword" type="password"></p>
  </div>
</div>

у form-container нужно будет играться с высотой, на него вешай анимацию css transition только на высоту, и обязательно добавить overflow: hidden и position: relative (иначе будет появляться скролл когда от маленькой формы к большой переходишь)
и выставляй ему высоту равной высоте текущего активного tab'а (offsetHeight)

Как анимировать блоки?

Есть вариант другой, но он более сложный получится. Для этого необходимо чтобы блоки с инпутами были абсолютом друг под дружкой, но следить за высотой всё равно придется, иначе верстка поедет

Как анимировать блоки?

Привет, смотри
Блоки находятся друг под дружной
а смена происходит через этот код

if (currentTab <= 2) { // Смена табов
    x[currentTab].classList.add('tab__unactive');
    x[currentTab].style.display = "none";
    currentTab = ++currentTab;
    x[currentTab].classList.add('tab__active');
    x[currentTab].style.display = "block";
  }

вот этот момент
x[currentTab].style.display = "none";
он сразу убирает элемент (скрывает), но display не анимируется.
Если есть желание чтобы форма по высоте изменялась плавно, то нужно чтобы анимировался контейнер по высоте. А для этого нужно следить за высотой внутрянки контейнера и выставлять значение height соответственно. Ну и на контейнер я думаю достаточно будет поставить transition обычный, без keyframe
тогда tabIn можно будет убрать в коде, скрытие можно не анимировать и делать сразу x[currentTab].style.display = "none";