MegaPuxapb

https://codepen.io/anon/pen/GBvVbR
Только у вас еще ошибка в html, label for 2 должно быть

Я использую второй вариант, но разницы особой нет, это скорее вопрос стиля.
В официальной документации есть текст:
"As the .change() method is just a shorthand for .on( "change", handler )"
то есть .change() это сокращенный вариант .on( "change", handler )

Никакой. Первая форма просто алиас / шорткат / псевдоним для второй. См. исходник:

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup contextmenu" ).split( " " ),
	function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		return arguments.length > 0 ?
			this.on( name, null, data, fn ) :
			this.trigger( name );
	};
} );

`<img src=`${link + out}` alt="icon" class="icon_sevices">`

О каких label'ах и каком select'е идёт речь:

const labels = document.querySelectorAll('#price_block .change_model_iphone .item label');
const select = document.querySelector('#select_model');

Как получить for:

const getFor = el => el.getAttribute('for');
// или
const getFor = el => el.attributes.for.value;
// или
const getFor = el => el.htmlFor;

Заполняем select option'ами:

// можно перезаписать разметку
select.innerHTML = Array
  .from(labels, n => `<option value="${getFor(n)}">iPhone ${n.innerText}</option>`)
  .join('');

// или, напрямую создавать новые элементы
select.append(...Array.prototype.map.call(
  labels,
  n => new Option(`iPhone ${n.textContent}`, getFor(n))
));

<div class="text">hello, world!!</div>
<div class="text">fuck the world</div>
<div class="text">fuck everything</div>

<select></select>

const texts = document.querySelectorAll('.text');
const select = document.querySelector('select');

select.append(...Array.from(texts, n => new Option(n.textContent)));
select.value = null;

select.addEventListener('change', ({ target: { selectedIndex } }) => {
  texts.forEach((n, i) => n.classList.toggle('active', i === selectedIndex));
});

https://github.com/dixonandmoe/rellax

используйте метод on

$(document).ready(function() {
    ...
    $('.clickable-elements element').on('click', 'a', function(e){
        //Какое-то действие
    });
   ...
});

$.ajax({
  url: "https://spreadsheets.google.com/feeds/list/1NzcKjtoS-p_Gz6ILOa3JB1aVgoPMC7mgepWtz9uBmgo/od6/public/values?alt=json",
  crossDomain: true, // это решает проблему с отсутствием Access-Control-Allow-Origin
  dataType: "jsonp", 
  success: function(data){
    console.log(data)
  }
});

Подробнее про это можно почитать тут: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Для этого блок нужно вынести за пределы контейнера, сделать container-fluid в нем row в нем два col. Визуально это col-xs-4 и col-xs-8. У первого еще text-right.

С классами и внешним видом не заморачивался: https://jsfiddle.net/justfeelin/f7ysLrme/1/

$("form").each(function(i, el) {
  $(el).submit(function() {
    let $that = $(this); // var $that = $(this);  - для ES5
    $.ajax({
      url: $that.attr('action'),
      type: 'POST',
      data: {
        contactemail: $that.find('input[type=email]').val()
      },
      success: function() {
        $that.closest(".section").find(".bg_form_submit").slideToggle("slow");
        alert("1");
        $('form').trigger('reset');
      },
      error: function() {
        alert("0");
      }
    });
    return false;
  });
});

P.S. Что-то мне подсказывает, что цикл тут вообще не нужен. У вас ведь одна форма на странице?

$(this).closest(".section").find(".bg_form_submit")

Если правильно понял:

function download(content, fileName, contentType) {
    var a = document.createElement("a");
    var file = new Blob([content], {type: contentType});
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}

Добавьте для #key-object { position: relative; z-index: 0;}

или добавить selectize.js на все страницы
или добавить проверку

if($.fn.selectize) {
  console.log('select select');
}

Что касается первого, если вы хотите, чтобы сам фансибокс указывал верное кол-во слайдов, то необходимо установить при вызове параметр:

$('.slider').slick({
infinite: false,
});

Тогда слайдер не будет делать клонов из слайдов для создания "бесконечной" ротации.
А так вы можете тупо css - сом скрыть счетчик самого фансибокса:

.fancybox-infobar{
display: none;
}

Ну а если нужно оставить и счетчик и infinite: true, то так:

//prevent duplicate in fancybox
$(document).find('.slick-cloned a').removeAttr('data-fancybox');