JS / jQ делает функцию построителя URL без дубликатов

Question

Сначала я должен сказать, что я просто хочу решить это как logi c, а не мой реальный код jQuery или JavaScript, потому что я изучаю reactjs Я пытаюсь решить эту логику c с помощью jQ или JS затем сделайте это в React. Поэтому я не хочу решения, подобного $.param, а также не хочу заменять последний & чем-то, я искал функцию URL Builder, что я пытаюсь сделать, это добавить параметр URL (строка запроса) Что я пробовал до сих пор:

let obj = {}
let array = []
let url = 'http://www.example.com/foo';

function buildUrl(base, key, value) {
  var sep = (base.indexOf('?') > -1) ? '&' : '?';
  return base + sep + key + '=' + value;
}

$('#btn1').click(function() {
  obj = {
    name: 'province',
    value: 11
  }
  array.push(obj)
  console.log('param 1 added!')
});

$('#btn2').click(function() {
  obj = {
    name: 'city',
    value: 2
  }
  array.push(obj)
  console.log('param 2 added!')
});

$('#build').click(function() {
  $.each(array, function(i, v) {
    url = buildUrl(url, v.name, v.value);
  });
  console.log(url)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1">1. Click this</button>
<kbd>-></kbd>
<button id="btn2">2. Then click this</button>
<kbd>=</kbd>
<button id="build">Make URL</button>

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

примечание: у меня много btn для построения параметра, поэтому я не могу определить значение каждый раз!

Answer 1

Это все здесь и здесь

let url = new URL('http://www.example.com/foo');
let params = url.searchParams;

document.getElementById("buts").addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.classList.contains('add')) {
    params.set(tgt.id, tgt.getAttribute('data-value'));
    console.log('param ' + tgt.id + ' added!', params.toString())
  }
});
document.getElementById("build").addEventListener('click', (e) => console.log(url));

<div id="buts">
  <button class="add" id="province" data-value="11">1. Click this</button>
  <kbd>-></kbd>
  <button class="add" id="city" data-value="2">2. Then click this</button>
  <kbd>=</kbd>
  <button id="build">Make URL</button>
</div>