How to set specific query string value (or update if exists) without appending the value on click of a <a> tag?

I am trying to update or set a given URL specific query string value on a click of an <a> element.

I managed to make it work by setting the URL:

<a id="my-link" href="http://example.com/">

$('#my-link').on('click', function(e) {
    let url = this.getAttribute('href');
    let queryStringKey = 'someKey';
    let queryStringValue = encodeURIComponent(someDataObject);
    let url += `?${key}=${queryStringValue}`;
    e.originalEvent.currentTarget.href = url; 
});

But this only works on the first click because it keeps appending the query string.

What I tried was to then save the original URL, set the url using e.originalEvent.currentTarget.href and then set it back after the click, but it doesn't work, it just reads the original url instead of the updated one:

<a id="my-link" href="http://example.com/">

$('#my-link').on('click', function(e) {
    let originalUrl = this.getAttribute('href');
    let queryStringKey = 'someKey';
    let queryStringValue = encodeURIComponent(someDataObject);
    let updatedUrl += originalUrl + `?${key}=${queryStringValue}`;
    e.originalEvent.currentTarget.href = updatedUrl; 
    this.href = originalUrl; // it then opens this URL instead of the updatedUrl
});

Use the URL API

Note: use new URL(this.href); if you do not have a valid URL since
new URL(this.getAttribute("href")) will fail on href="/"
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('#my-link').on('click', function(e) {
  e.preventDefault(); // to see the console
  let queryStringKey = 'someKey';
  let queryStringValue = { x: 2 };
  let url = new URL(this.href); 
  url.searchParams.set(queryStringKey, queryStringValue);
  this.href=url.toString();
  console.log(this.href)
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="my-link" href="/">Click</a>

<!-- end snippet -->

Whenever the url get clicked Remove the additional key value to restore the original link :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// A $( document ).ready() block.
$( document ).ready(function() {
    
    let someDataObject = 'someDataObject';
    $('#my-link').on('click', function(e) {
      e.preventDefault(); // to see the console
      let url = this.getAttribute('href');
     
      let queryStringKey = 'someKey';
      let queryStringValue = encodeURIComponent(someDataObject);

      url = url.split('?'+queryStringKey)[0];
  
      url += `?${queryStringKey}=${queryStringValue}`;
      
      console.log(url);
      e.originalEvent.currentTarget.href = url; 
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="my-link" href="http://example.com/">click me</a>

<!-- end snippet -->

I would do so:

$('#my-link').on('click', function(e) {
    let url = this.getAttribute('href').split('?')[0]; // remove old query string
    let queryStringKey = 'someKey';
    let queryStringValue = encodeURIComponent('someValue');
    url += `?${queryStringKey}=${queryStringValue}`;
    e.originalEvent.currentTarget.href = url; 
});