Скрипт для массовой формировки параметров для GET запроса

Есть HTML страница наподобие Excel таблицы. У страницы есть столбцы и строки.

Данные берутся из БД ( это нас не интересует)

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

https://i.postimg.cc/mr0RVrw2/1.jpg

Данная форма служит для ввода значение. После того как мы вводим значение и нажимаем Apply filter к нынешней ссылке добавляется параметр для гет запроса. В качестве название параметра служит  id треугольника на который мы кликнули

https://i.postimg.cc/d3mDCCGy/2.jpg

В качестве значение параметра будет та которую вы вводим в поле которое открывается при клике на треугольник.

Мы кликнули на треугольник с id home и поэтому название параметра будет таким же, т.е home.

Допустим мы в поле (которое открылось после клика на треугольник с id home) ввели значение Namos и нажали на кнопку Apply filter

Значит сформируется параметр home=Namsos и добавится к нынешней ссылке и откроется полученная ссылка. https://currenturl.com/demo.html&home=Namsos

Если мы после этого кликнем на треугольник под названием Away и введем туда значение для примера Tangmoen то сформируется очередной параметр где название будет id треугольника, т.е away а его значение Tangmoen и получается такой параметр away=Tangmoen. Данный параметр так же добавляется к нынешней ссылке и открывается полученная ссылка https://currenturl.com/demo.html&home=Namsos&away=Tangmoen

И так далее для остальных.

Есть разные виды форм

Обычная с инпутом https://i.postimg.cc/mr0RVrw2/1.jpg

С выборкой (select) https://i.postimg.cc/QxP82GJt/3.jpg

С чекбоксами https://i.postimg.cc/pdvHv2h2/4.jpg

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

Теперь перейдем к тому как исключать эти параметры из нынешней ссылки

После того как мы вводим значение и применяем его, фоновый цвет ячейки с треугольником становится красным. Это визуально говорит нам о том что в ссылке существует параметр с id ячейкой у которого фоновый цвет красный. При клике мы видим что значение которую вы ввели отображается в инпуте. Для того чтобы отменить эту операция мы нажимаем на Delete filter

https://i.postimg.cc/02mtG7jN/5.jpg

После этого скрипт исключает из текущей ссылки параметр у которого название такое же как id ячейки где стоит треугольник и где мы нажали на Delete filter из текущей ссылки и открывает полученную ссылку. Т.е из ссылки исключается параметр away=Tangmoen

Эти параметры можно исключать в ручном режиме по отдельности нажимая Delete filter везде где мы ввели значение или же можно за один клик удалить все параметры с помощью кнопки

Reset all filters https://i.postimg.cc/v8KjtQv0/6.jpg

Все что выше описано логика работы скрипта. Теперь к сути задачи

Задача состоит в том чтобы сформировать параметры массово которые будут добавляться к текущей ссылке и после открываться.  Что значит массово. Выше описана логика как добавляются параметры к ссылке. Как и описано этот процесс происходит по очереди. Т.е сначала мы кликаем на определенный треугольник, вводим значение в после которое открывается и нажимаем Apply filter и после открывается новая полученная ссылка с этим параметром. После того как новая ссылка открылась кликаем на другой треугольник, вводим значение и нажимаем Apply filter  и ждем когда откроется новая полученная ссылка. И так далее процесс продолжается по очереди . На это уходит определённое время. Потому что после каждого раза когда мы вводим значение нужно ждать загрузки страницы. Задача состоит в том чтобы сформировать все эти параметры, добавить их в текущей ссылке и открыть полученную ссылку за раз. Теперь вопрос куда вводить, где хранить все эти значение чтобы скрипт мог взять все эти значение и сформировать новую ссылку с параметрами и открыть ее

Давайте посмотрим на это видео

https://drive.google.com/file/d/1EtsCR3nePlFKayjglpREJHNjRfhzykIE/view?usp=drive_link

Как видим если вводит значение но не нажать Apply filter то данные значения хранятся в формах куда мы их ввели. Они хранятся в DOM-дереве страницы пока сессия активная. Т.е если перезагрузить то они пропадают. Значит скрипт может взять значение из форм и с помощью их id сформировать параметры , добавлять их в текущую ссылку и открыть эту ссылку.

Допустим мы кликаем на треугольник под Away и вводим туда Tangmoen. Не нажимаем на Apply filer. После нажимаем на треугольник под  Home и вводим туда Namsos тут тоже не нажимаем на Apply filer

Значит у нас две формы куда мы ввели значение но не применили. Теперь они хранятся в DOM-дереве страницы

Нужно сделать отдельную кнопку как Reset all filters . Назовём ее Apply all filters

Нажимаю на Apply all filters, скрипт парсит все формы, получает список всех форм, где значение не пустое, сформирует параметры (название это id а значение это то что мы ввели в форму) , добавляет их к текущей ссылки и открывает полученную ссылку. Таким образом мы за раз сформировали больше одного параметра и сэкономили много времени.

Если мы посмотрим на название класса всех треугольников, то увидим, что они одинаковые

https://i.postimg.cc/FHbSg5qY/7.jpg

Скрипт должен поддерживать парсинг из всех видов форм (инпут, чекбокс, селект)

Самое главное он не должен конфликтовать с другими скриптами которые уже присутствуют в коде.

Прикрепил архив где HTML файл с скриптами