Sorting Puzzle Themes

I was going to do some puzzles and wanted to focus on specific themes. It's really nice how your accuracy in each is tracked, but with 50+ options it's a bit difficult to sift through them and find the "lowest n" categories. Ideally this would be part of the site.

Until then, I wrote a script to do it for me (it could definitely be improved, but it works):

// Extract the data
const puzzles = [];
document.querySelectorAll(".select-theme-component").forEach(e => {
    const text = e.querySelector(".cc-checkbox-component .cc-checkbox-label")?.innerText || "Unknown";
    const percentText = e.querySelector(".select-theme-percentage")?.innerText || "0%";
    const percent = parseFloat(percentText); // Extract numeric value
    puzzles.push({ text, percent });
});

// Sort puzzles by percentage in descending order
const sortedPuzzles = puzzles.sort((a, b) => b.percent - a.percent);

// Display as a table in the console
console.table(sortedPuzzles, ["text", "percent"]);

// Sort and reorder the DOM elements
const parentElement = document.querySelector(".select-themes-container-component");
const elements = Array.from(document.querySelectorAll(".select-theme-component"));

const sortedElements = elements.sort((a, b) => {
    const percentA = parseFloat(a.querySelector(".select-theme-percentage")?.innerText || "0");
    const percentB = parseFloat(b.querySelector(".select-theme-percentage")?.innerText || "0");
    return percentB - percentA;
});

parentElement.innerHTML = ""; // Clear current elements
sortedElements.forEach(el => parentElement.appendChild(el));

After running it in the console it should look like this:

Also I realize providing code for someone else to run in their browser is a security risk for them, so if this isn't allowed just lmk and I'll delete the post (or feel free to delete it)! I could also do a link to a gist if that's preferred