Add additional queries to url by link - php

Question

I have a site that uses query strings to retrieve the data like so:
<div id="menu-sort-dropdown" class="search-filter-item">
<p><?php echo $query_sort_title; ?></p>
<ul class="dropdown-menu">
<li>Newest</li>
<li>Oldest</li>
<li>Alphabetically</li>
</ul>
</div>
<div id="menu-category-dropdown" class="search-filter-item">
<p><?php echo $query_category_title; ?></p>
<ul class="dropdown-menu">
<li>All</li>
<li>Coaching</li>
<li>Conversation</li>
<li>Craft</li>
<li>Creativity</li>
</ul>
</div>
It works great getting the data like:
teachings/?sort=SORT_NAME_ASC
or
teachings/?category=Creativity
but I can do both like:
teachings/?category=Creativity&sort=SORT_NAME_ASC
I can't wrap my head around how to add that. If I just append the strip it will become a mess.

Answer 1

The following code doesn't 'duplicate' the values in the url if you keep clicking the category or sort. It's made to copy/paste and run.
// to check the values
echo '<pre>';
print_r($_GET);
echo '</pre>';
echo '<hr>';
function foo($type, $value){
$args = $_GET;
$args[$type] = $value; // prevent duplication
return http_build_query($args); // returns new query string
}
?>
SORT_DATE_LIT_ASC
<br>
SORT_NAME_ASC
<br>
Coaching
<br>
Conversation
You can also have a code to remove any of those. Add it right after the previous code (also copy/paste). Take a look:
<?php
function bar($type){
$args = $_GET;
unset($args[$type]);
return http_build_query($args); // returns new query string
}
?>
<hr>
Remove SORT
<br>
Remove CATEGORY

Answer 2

As for now your dropdown element do a simple action - go to provided url. If you want to select a few values then your elements should store selected value instead of open url. You can do this with for example this JS code
var menus = [];
function addElement(type, element) {
menus[type] = element;
}
The type above is number index of your menu type. For example 0 can be for sort and 1 for category - this is for ensure that you can select only one value from menu type. Now you can replace your code with something like this
<div id="menu-sort-dropdown" class="search-filter-item">
<p><?php echo $query_sort_title; ?></p>
<ul class="dropdown-menu">
<li>Newest</li>
<li>Oldest</li>
<li>Alphabetically</li>
</ul>
</div>
<div id="menu-category-dropdown" class="search-filter-item">
<p><?php echo $query_category_title; ?></p>
<ul class="dropdown-menu">
<li>All</li>
<li>Coaching</li>
<li>Conversation</li>
<li>Craft</li>
<li>Creativity</li>
</ul>
</div>
To go to the prepared URL you need to add another element like for example a button (or something else with calling openUrl function after mouse click)
<input type="button" onclick="openUrl('?')" value="Go to URL">
And the JS code for openUrl function
function openUrl(prefix) {
var url = prefix + menus.join('&');
document.location.href = url;
}