TheBububo

1. Нужен скрипт который будет конвертировать png и jpg в webp и складывать с тем же именем и постфиксом .webp
2. При запросе файла .*\.(png|jpe?g)$ проверить заголовки Accept: image/webp, если нет отдать оригинал картинки. Иначе идём дальше.
3. Пробовать отдать сначало $uri.webp
4. Если файла нет то выполнять скрипт с параметром $uri
5. Скрипт создает .webp и выводит его

Смотреть в сторону https://github.com/rosell-dk/webp-on-demand

Пример конфига для nginx:

location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    $uri.webp
    /webp-on-demand.php?xsource=x$request_filename
    ;
}

Можно при отправке запроса блокировать форму с фильтрами, при этом чтобы пользователю было выдно что она неактивна в это время, при получении ответа снимать блок разумеется.

Или добавить кнопку сабмита после нажатия которой и будут срабатывать фильтры.

Главный минус:
Не все сидят с Chrome и не у каждого есть Google-аккаунт.
Поэтому вы в любом случае должны предоставить пользователю способ входа, а это использовать как приятный бонус для юзеров Google.

Вам поможет Flexbox, он умеет управлять очередностью элементов.

А что вы собственно хотите сделать?
В какую переменную вы хотите чтобы "пришли" значения из функции?
Вы никуда не записываете результат работы функции.

Ваш код сейчас работает так.
При загрузке страницы в консоль выводится результат функции при пустом поле ввода - "api.bandsintown.com/artists//events.json?app_id=si..."
При нажатии на кнопку, происходит вызов функции, который в общем-то ничего не меняет, и сразу за этим идет сабмит формы методом GET по текущему адресу, что перезагружает страницу. При этом, разумеется, очищается поле.

сверстать статику, получать json данные и в js заполнять - современный вариант.

Допустим, есть несколько секций, содержащих блок с галереей. Галерея везде имеет одинаковое оформление, но в каждой секции разные размеры и положение.

<div class="catalog">
	<div class="gallery gallery--alt catalog__gallery">
		...
	</div>
</div>

Класс gallery задаёт общее оформление галереи.
Класс catalog__gallery задаёт размеры и позицию относительно нужной секции.
Класс gallery--alt - класс-модификатор, допустим, альтернативное оформление с незначительными изменениями.

Я рекомендую вместо вызова функции внутри onClick атрибута сделать так:
<a id="cash" href="#">Test</a>

$(document).ready(function() {
	$("a#cash").on("click", function(e) {
		console.log(e);
	})
});

Таким образом вы получите много информации о действии, элементе который слушаете (ссылку), доступно это внутри объекта target!!!
Ну в браузере откройте и кликните на ссылку, в консоли будет выведено всё что Вам нужно!

Погуглите следующие строки:
html форма
php GET и POST переменные
PHP + mysql

Я только учусь, так что могу ошибаться. Но что, если клонированному блоку добавлять класс и при копировании проверять: если класс есть, то не копировать элемент.
Это "флаг" вроде называется, или типа того))

codepen.io/Rybak/pen/MawyRv
как вам такой вариант ?

codepen.io/anon/pen/XmbdZa если правильно понял