How to make my sorting functions work together?

I have a website with a dropdown that contains three sorting and filtering options: "Sort by Price," "Sort by Location," and "Sort by Month." The code for these functionalities seems to work fine individually, but the issue arises when attempting to use more than one option simultaneously. Only the code at the top of the page works, while the others do not produce the expected results.

Here's a summary of the current code:

Sorting by Price: The website successfully sorts the 'hero' divs by the data-price attribute when the user clicks the "Low to High," "High to Low," or "Default" buttons.

Filtering by Month: The website correctly filters the 'hero' divs based on the selected month from the dropdown. It displays the divs that match the selected month and hides the others.

Filtering by Location: The website also filters the 'hero' divs based on the selected location from the dropdown. It shows the divs that match the selected location and hides the others.

However, the problem is that when I try to use more than one option together, only the first one I selected seems to work. For example, if I sort by price first, and then try to filter by month or location, the sorting stops working, and only the filtering works.

// sorting functions
document.addEventListener("DOMContentLoaded", function () {
// Function to sort 'hero' divs by data-price attribute
function sortHeroByPrice(order) {
const container = document.querySelector("#hero-container");
const heroElements = document.querySelectorAll("#hero");
// Convert NodeList to an array for easier manipulation
const heroArray = Array.from(heroElements);
heroArray.sort(function (a, b) {
const priceA = parseInt(a.getAttribute("data-price"));
const priceB = parseInt(b.getAttribute("data-price"));
const dateA = new Date(a.getAttribute('data-date'));
const dateB = new Date(b.getAttribute('data-date'));
if (order === "lowToHigh") {
return priceA - priceB;
} else if (order === "highToLow") {
return priceB - priceA;
}
else if (order === "defaultBtn") {
return dateA - dateB;
} 
});
// Append sorted elements to the container
heroArray.forEach(function (hero) {
container.appendChild(hero);
});
}
// Sort initially (you can choose 'lowToHigh' or 'highToLow')
sortHeroByPrice('defaultBtn');
// Button click handlers
document.getElementById("lowToHigh").addEventListener("click", function () {
sortHeroByPrice('lowToHigh');
});
document.getElementById("highToLow").addEventListener("click", function () {
sortHeroByPrice('highToLow');
});
document.getElementById("defaultBtn").addEventListener("click", function () {
sortHeroByPrice('defaultBtn');
});
document.getElementById("moblh").addEventListener("click", function () {
sortHeroByPrice('lowToHigh');
});
document.getElementById("mobhl").addEventListener("click", function () {
sortHeroByPrice('highToLow');
});
document.getElementById("mobdef").addEventListener("click", function () {
sortHeroByPrice('defaultBtn');
});   
});
// filter by month
//     Function to filter hero divs by selected month
function filterHeroByMonth(selectedMonth) {
const heroElements = document.querySelectorAll('.hero');
heroElements.forEach(function (hero) {
const month = hero.dataset.month;
if (selectedMonth === 'All' || selectedMonth === month) {
hero.classList.remove('monthf');
}
else if (selectedMonth !== month){
hero.classList.add('monthf');
hero.style.display = 'none';
}
});
}
// Dropdown click handler
const dropdownItems = document.querySelectorAll('.dropdown-item');
dropdownItems.forEach(function (item) {
item.addEventListener('click', function (e) {
e.preventDefault();
const selectedMonth = item.dataset.month;
const heroElements = document.querySelectorAll('.hero');
heroElements.forEach(function (hero) {
hero.classList.remove('monthf');
hero.style.display = 'flex';
});
filterHeroByMonth(selectedMonth);
});
});
// function to filter by location
function filterHeroByLocation(selectedLocation) {
const heroElements = document.querySelectorAll('.hero');
heroElements.forEach(function (hero) {
const location = hero.dataset.location;
if (selectedLocation === 'All' || selectedLocation === location) {
hero.classList.remove('monthf');
}
else {
hero.classList.add('monthf');
hero.style.display = 'none';
}
});
}
// Dropdown click handler
dropdownItems = document.querySelectorAll('.dropdown-item');
dropdownItems.forEach(function (item) {
item.addEventListener('click', function (e) {
e.preventDefault();
const selectedLocation = item.dataset.location;
const heroElements = document.querySelectorAll('.hero');
heroElements.forEach(function (hero) {
hero.classList.remove('monthf');
hero.style.display = 'flex';
});
filterHeroByLocation(selectedLocation);
});
});
});

Lots of stuff could be improved in your code. Some of them are:

• To get the value of the dropdown use onchange listener of the select tag, instead of adding an event listener to each option.

   <select onchange="monthFilterChanged(event)">
  

And then to get the selected value:

 function monthFilterChanged(e) {
const selectedMonth = e.target.value;
....
}

• Keep the current sorting value in a javascript variable:

   let sortingOrder = "defaultBtn"
  

Every time sorting is changed update the value like so:

sortingOrder = "NEW_VALUE"

After changing the value call the sorting function again without passing the sorting order as param, use the new variable.

const currentOrder = sortingOrder

Here you have a codepen where I did month and price, both of them work together, adding location filter should work as well.

https://codepen.io/nicofetter/pen/zYMmjpm