sort and filter product with query builder spatie - laravel

Question

I have filter product that have sort and filter
sorting by price, created at , available product
But when I filter the product, I can no longer sort the same product filter
for example
http://127.0.0.1:8000/product?&filter[brand]=1
and I want sort product in brand based on created at but
When I click on the latest, the link does not continue the filter and only does the sort
http://127.0.0.1:8000/product?sort=created_at
I know there is a problem with my JavaScript, but I do not know how to solve it
<form method="GET" id="jobfilter-form" enctype="multipart/form-data" content="{{ csrf_token() }}">
<div class="col-sm-12 d-flex justify-content-center">
<div class="product-short">
<ul class="products-archive-tabs watch-page">
<p>order by ::</p>
<li>
<a id="createdAt" href="{{ URL::current()."?sort=created_at" }}">
The oldest
</a>
</li>
<li>
<a id="createdAt" href="{{ URL::current()."?sort=-created_at" }}">
the newest
</a>
</li>
</ul>
</div>
</div>
<div class="shop-box-area">
<div class="sidebar-categores-box shop-sidebar mb-10">
<div class="expander">
<div class="inner-bit">
<ul class="barnd-item">
#foreach ($brand as $brands)
<li>
<label class="m-checkbox">
<input
name="brand" type="checkbox" value="{{ $brands->id }}"
#if (in_array($brands->id, explode(',', request()-
>input('filter.brand'))))
checked
#endif
>
{{ $brands->name }}
<span class="count-brand">({{count($brands->product)}})
number
</span>
<img src="/photo/brandsmall/{{$brands->smallbarnd}}">
</label>
</li>
#endforeach
</ul>
</div>
</div>
</div>
</div>
java script
<script>
function getIds(checkboxName) {
let checkBoxes = document.getElementsByName(checkboxName);
let ids = Array.prototype.slice.call(checkBoxes)
.filter(ch => ch.checked == true).map(ch => ch.value);
return ids;
}
function filterResults() {
let brandIds = getIds("brand");
let createdAt = getIds("createdAt");
let href = 'product?';
if (createdAt.length) {
href += '&sort[created_at]=' + createdAt;
}
if (brandIds.length) {
href += '&filter[brand]=' + brandIds;
}
document.location.href = href;
}
$("#jobfilter-form #filter").on("click", e => {
filterResults();
});
</script>
$products = QueryBuilder::for(Product::class)
->allowedFilters([
AllowedFilter::exact('brand', 'brand_id'),
])
->allowedSorts('created_at')
->defaultSort('available_id')
->with('category')->paginate('5')
->appends(request()->query());
How can I keep the latest value in the link?

Answer 1

At First, you should not have duplicated ID value in your elements.
id="createdAt" is duplicated.
Second, you are using href for the sort function, whenever you click on it, the page will redirect to the URL of the href. so other things on the page will reset.
You should use a checkbox for sort items without the <a> tag, then when filter results are called, your sort items will be added to the URL without any page redirection.