Tigronix

как то так

{% set items = [
	{img:'item-1', title:'111'},
	{img:'item-2', title:'222'},
	{img:'item-3', title:'333'}
] %}
{% import './macros/_item-block.html' as itemBlock %}
{% for item in items %}
<div class="section-items__item">
	{{ itemBlock.item(item.img, item.title) }}
</div>
{% endfor %}

Можно перезаписать переменную указав что она пустой объект
myObject = {};

В тот момент пока блок крутится, мышь попадает ВНЕ его области.
Тут же начинается вращение обратно, так как блок думает, что мышь убрали.
И во время обратного вращения мышь опять попадает на блок, заставляя блок опять менять анимацию.
Решается еще одним блоком, я сделал .wrapper, при наведении на который работает магия.
https://jsfiddle.net/41g4yn68/4/

www.jqueryscript.net/demo/jQuery-Credit-Card-Input...
или
https://jsfiddle.net/webirus/fp2ytj9k/

Привет! Давайте разберём ваш код.

Во-первых, вы заполняете массив в самом начале:

// Создали массив
var stepSecond = [];
// Сохранили в него свойства checked разных объектов
stepSecond[1] = $('#firmware2').prop('checked');
stepSecond[2] = $('[name="stamping"]').prop('checked');
stepSecond[3] = $('#eyelet-color').prop('checked');
stepSecond[4] = $('[name="rubber-flat"]').prop('checked');

При изменении инпутов их состояния не попадут в массив автоматически.

Во-вторых, проверка $(stepSecond == 'true') очень странная. stepSecond — массив из 5 элементов (на нулевом месте у вас undefined, 1-4 элементы заполнены. Вы сравниваете его со строкой "true". Оператор сравнения == может вернуть либо true, либо false. В вашем случае массив stepSecond никогда не будет равен строке true. Так что сравнение всегда вернёт false. Значит ваше условие эквивалентно такому: $(false). Функция $ из jQuery создаёт jQuery-объект. Тогда ваше условие превращается в if (jQuery-объект), а значит всегда истинно.

Вот как можно было бы запрограммировать эту форму: https://jsfiddle.net/isqua/gge88ogL/2/

Вам нужно получить базовые знания о том, как работает JavaScript. Что такое переменные, функции, каких типов бывают данные и т.п.

var score = 0;
$( "input:radio:checked" ).each(function(){
    score += parseInt($(this).val());
});

P.S. Обновил ответ

Работа должна быть выполнена четко по заранее оговоренному ТЗ. Если результат удовлетворяет ТЗ, но не удовлетворяет заказчика (так бывает в 8 случаях из 10), заказчик оплачивает выполненную работу и заказывает правки отдельно или идет лесом.
В вашем случае жить в бесконечных правках или послать заказчика подальше, денег вы не получите в любом случае. В будущем брать работу с гарантией оплаты (на фриланс сервисах) или делить стоимость на выполнение ТЗ и последующую поддержку и первую часть брать в качестве предоплаты. Но самое главное у вас на руках должно быть четко прописанное и согласованное с заказчиком ТЗ. Не обязательно там должна быть его подпись, достаточно электронного письма с фразой типа "с техническим заданием полностью согласен"

Попробуйте добавить к .global_wrapper position: fixed; точнее к .body_overflow на видео видно что шапка не дергается, так как контент, по всему она имеет position: fixed;

https://jsfiddle.net/pta95m20/1/

var price = 5500;

document.querySelector("#matrix").addEventListener("change", function(event) {
	document.querySelector("#number").textContent = price + +this.value || price ;
}, false);

Как-то так:
jsfiddle.net/np91v1zb/2

Можно создать переменную price и записать в неё значение по умолчанию (к примеру 5000). После change списка вытаскивайте значение value и выводите на экран значение price + value. После смены пункта в списке цена будет пересчитываться и никаких прогрессий)

Очевидно вы должны хранить "исходное" значение отдельно и уже к нему прибавлять или не прибавлять стоимость опции.

Надо сделать в незафиксированном положении position:absolute, а не relative, оно дёргается из-за того, что при встраивании увеличивается страница.
А вообще, не очень хорошо по отношению к помогающим вываливать всю страницу, чтоб они там искали в куче кода интересующий вас элемент..