imhuman

randomItem должно быть целым, getRandomArbitrary возвращает float

function getRandomArbitrary(min, max) {
  return  Math.floor(min + Math.random() * (max + 1 - min))
}

И вместо (0, 3) в вашем случае надо (0, 2)

.index() замени на .attr('index')

Потому что$(this)внутри сабмита это form. А ты зачем-то уходишь в его предка body и проверяешь все инпуты уже внутри него. Соответственно, твое действие произойдет только когда валидны все поля на странице, а не внутри нужной формы. Просто убери .parent() и поправь селектор, который используешь при очистке.

jquery.mousewheel.js подключи
https://jsfiddle.net/h0Lp10tt/

https://jqueryui.com/sortable/#connect-lists

SVG карту с нужным оформлением и маркерами можно сгенерировать тут pixelmap.amcharts.com

Оба случая одинаковы по сложности, да и по сути тоже, гуглите lazyload. Если вкратце, то на страницу загружаются множество img с одинаковым src(фон или индикатор какой-нибудь). В кастомном атрибуте, например, my-attr каждого изображения прописывается ссылка на настоящее изображение. И как только img становится видимым на клиентском экране происходит замена src с дефолтного значения на my-attr. Но тут уже чистая математика, пояснять нечего)