How to make interactive link generation?

Question

API

Hello.
Please help me implement interactive link generation.
There is the following functionality: https://mi-spb-rservice.ru/uslugi/smartfonyi
The essence of this interactive functionality is that it helps to visually get a link to the required page by clicking on trigger blocks.
In essence, each of the links by the "device" and "breakdown" parameters can somehow become the original part of the link, that is, the user can either go from the breakdown to the repair by selecting the device, or go from the device to the repair by selecting breakdown.
I noticed that the items in the list of breakdowns contain in the code data-alias="razbito-sensornoe-steklo-(tachskrin)", and in the selection of the device, the items contain data-rel="Mi"
When trying to find a solution to the question, they suggested the following code:

const filters = {}
// Добавляем кнопкам data атрибуты (data-filter, data-value)

// Вешает событие onclick на все кнопки
document.querySelectorAll('button[data-filter]').forEach(btn => {
  btn.addEventListener('click', () => {
    const key = btn.getAttribute('data-filter')
    const value = btn.getAttribute('data-value')
    filters[key] = value
  })
}) // P.s можно добавить проверки на наличие атрибутов

// И код для получения querystring
const getQueryString = () => Object.keys(filters).map((key) => {
  return encodeURIComponent(key) + '=' + encodeURIComponent(filters[key])
}).join('&')

<button data-filter="a" data-value="1">Параметр a = 1</button>
<button data-filter="b" data-value="2">Параметр b = 2</button>
<button data-filter="c" data-value="3">Параметр c = 3</button>
<button onclick="alert(`${window.location.origin}/?${getQueryString()}`);">Получить querystring</button>

UPD. I found this interesting thing: https://codepen.io/pen/
That's how, in principle, it is necessary, but how to make an array output in href=""?