Иван Симонов

<form action="#" class="form" method="POST">
здесь ---------------------------------------------------↑↑↑↑ должно быть GET

Потому что у вас после первого клика вылезает Title

до клика:


после клика:

Держи

$('.item').on('click', function() {
        $('.active').removeClass('active');
        $(this).addClass('active');

        var index = $(this).index('.item');
        var block = $('.block');

        function transferBlock(i) {
          block.insertAfter($('.item').eq(i));
        }

        switch((index + 1) % 3) {
          case (0):
            transferBlock(index);
            break
           case(1):
            transferBlock(index + 2);
            break
          case(2):
            transferBlock(index + 1);
            break;
        }
    });

(изначально он скрыт) после ряда

Его нет изначально там, т.к. при ресайзе (поворот экрана например) страницы кол-во блоков в ряду будет меняться и довольно глупо - расставлять скрытые блоки заранее.
Блок появляется после определенного элемента. Значит для определения "последнего в ряду" вам необходимо вычислить ширину ряда и положение текущего блока, на котором кликнули. Дальше думаю уже все понятно.

Но зачем эта боль, если давно для таких целей используют всплывающие оверлеи?

Например, svg с path'ом-дугой и анимацией:

А почему stroke-dashoffset: -500; не устраивает?

На бекенде по айпи определяете страну, и отдаете нужную цену и валюту

Ну так у вас город хранится в g.getLocalities()[0]), а в city у вас хранится html элемент. Вот так правильно.
g.getLocalities()[0] === "Москва"

for (let i = 0; i < blocks.length; i++) {
	blocks[i]._clickCnt = 0;
  blocks[i].addEventListener('click', function() {
    var num = parseFloat(blocks[i].innerText, 10);

    if (this._clickCnt > 1) {
      this.classList.add('off');
      this.classList.remove('on');
      sum -= num;
      this._clickCnt--;
    } else {
      this.classList.add('on');
      this.classList.remove('off');
      sum += num;
      this._clickCnt++;      
    }

    blockResult.innerHTML = sum;
  });

возможно так (на 16 строке изменения)
https://jsfiddle.net/ayc8q4z0/

Нужно ловить mousedown и смотреть свойство event.detail
https://jsfiddle.net/av31xd02/3/

event.detail - Количество последовательных кликов, произошедших за короткий промежуток времени, увеличенное на единицу.

Потому что Вы выводите после того, как цикл закончился. И в result, соответственно, последнее значение.

Если у переключателя только два состояния, то проще будет сделать это через один класс и транзишены, а не анимации:

https://jsfiddle.net/tg3fm9no/1/

navbar.classList.toggle('fixed', (lastScroll - scrollTop > 0) && scrollTop);

У вас в коде полная каша, вы на все кнопки вешаете один и тот же обработчик, который берёт media из глобальной области видимости, а оно после первого цикла является последним плеером, вот работающий( но не хороший ) код https://jsfiddle.net/qf8rsbtw/ .
Чтобы не вешать все обработчики циклом можно использовать делегирование https://learn.javascript.ru/event-delegation .

Так вы делаете media.play(), но при этом у вас в media хранится только последний элемент...

Навешивайте события клика по кнопкам в цикле где вы задаете переменную media... Короче говоря я бы переписал полностью... Делал бы цикл по видеозаписям и брал бы паррент т.е класс media-wrapper и в нем уже искал кнопки и после навешивал бы на найденные кнопки события... как то так... лень писать код... ;3 Думаю суть передал...