JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>
	<label for="url">URL: </label>
	<input type="text" id="url" value="https://www.example.com/?foo=1&bar=2#baz" />
</p>

<p>
	<label for="key">Parameter Name</label>
	<input type="text" id="key" />
</p>

<p>
	<label for="value">Parameter Value</label>
	<input type="text" id="value" />
	<label for="removeValue">Remove</label>
	<input type="checkbox" id="removeValue" />
</p>

<p>
	<button type="button" id="update">
	Update URL
	</button>
</p>

CSS

#url {
	width: 100%;
}

JavaScript

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
  	if (uri.match(re)) {
		return uri.replace(re, '$1$2').replace(/[?&]$/, '').replaceAll(/([?&])&+/g, '$1').replace(/[?&]#/, '#');
	} else {
		return uri;
	}
  } else {
  	if (uri.match(re)) {
  		return uri.replace(re, '$1' + key + "=" + value + '$2');
	} else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
  }  
}

$(function() {
	$('body')
	.on( 'click', '#update', function() {
		var urlElement = $('#url');
		var uri = urlElement.val();
		var key = $('#key').val();
		var value = $('#removeValue').is(':checked') ? undefined : $('#value').val();
		
		urlElement.val( updateQueryStringParameter( uri, key, value ) );
	} )
	.on( 'change', '#removeValue', function() {
		$('#value').prop( 'disabled', $(this).is(':checked') );	
	});
	
	$('#removeValue').change();
});