Необходимо удалить сортировку по количеству ошибок, а сортировку при критичности переделать в фильтры с чекбоксами: высокая, средняя и низкая, которые могут работать, например если мне нужно увидеть только кртичные и средние ошибки. Вот код:
report.ejs:
<!-- templates/report.ejs -->

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO Аудит</title>
    <link rel="stylesheet" href="./dist/styles.css">
</head>
<body>
    <!-- Боковое навигационное меню -->
    <aside class="sidebar">
      <ul>
        <% auditSections.forEach(function(section, sectionIndex) { %>
          <li class="main-section">
            <a href="javascript:void(0)" onclick="toggleSubsections('<%= sectionIndex %>')">
              <span><%= section.section %></span>
              <span class="toggle-icon">▼</span>
            </a>
            <ul class="subsections" id="subsections-<%= sectionIndex %>">
              <% section.subsections.forEach(function(subsection, subsectionIndex) { %>
                <li>
                  <a href="#section-<%= sectionIndex %>_subsection-<%= subsectionIndex %>">
                    <%= subsection.title %>
                  </a>
                </li>
              <% }) %>
            </ul>
          </li>
        <% }) %>
      </ul>
    </aside>

    <!-- Основное содержимое -->
    <main class="main-content">
      <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
        <h1 class="mb-10">SEO-аудит сайта zavodaso.ru</h1>

        <div class="metrics">
          <div class="metrics__card">
            <h4 class="font-bold text-xl mb-1">
              <%= totalTechnicalErrors %>
            </h4>
            <span class="text-sm font-medium text-slate-600">технических ошибок</span>
          </div>
          <div class="metrics__card">
            <h4 class="font-bold text-xl mb-1">
              <%= totalSeoErrors %>
            </h4>
            <span class="text-sm font-medium text-slate-600">SEO-ошибок</span>
          </div>
        </div>

        <!-- Дата создания и проведения отчета -->
        <div class="report-date">
            <p>Дата создания отчета: <strong><%= reportDate %></strong></p>
        </div>

        <!-- Панель управления: Поиск, Фильтрация и Сортировка -->
        <div class="control-panel">
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="Поиск по задачам..." onkeyup="filterTasks()">
            </div>
            <div class="sort-container">
                <select id="filterSelect" onchange="filterTasks()">
                    <option value="">Критичность по умолчанию</option>
                    <option value="criticality-high">Высокая критичность</option>
                    <option value="criticality-medium">Средняя критичность</option>
                    <option value="criticality-low">Низкая критичность</option>
                </select>
                <select id="sortSelect" onchange="sortTasks()">
                    <option value="">Сортировка по умолчанию</option>
                    <option value="errorAsc">Ошибки: по возрастанию</option>
                    <option value="errorDesc">Ошибки: по убыванию</option>
                </select>
            </div>
        </div>

        <% auditSections.forEach(function(section, sectionIndex) { %>
            <div class="audit-section" id="section-<%= sectionIndex %>">
                <h2><%= section.section %></h2>
                <% section.subsections.forEach(function(subsection, subsectionIndex) { %>
                    <div class="audit-subsection" id="section-<%= sectionIndex %>_subsection-<%= subsectionIndex %>">
                        <h3><%= subsection.title %></h3>
                        <% subsection.tasks.forEach(function(task, taskIndex) { %>
                            <div class="audit-task" data-error-count="<%= task.errorCount || 0 %>" data-criticality="<%= task.criticalityClass %>" data-original-order="<%= taskIndex %>">
                                <div class="audit-header">
                                    <div style="display: flex; align-items: center; cursor: pointer;" onclick="toggleDetails('desc_<%= sectionIndex %>_<%= subsectionIndex %>_<%= taskIndex %>')">
                                        <%= task.description %>
                                        <% if(task.customErrorText) { %>
                                            <span class="error-count error-<%= task.errorBackgroundColor %>">
                                                <%= task.customErrorText %>
                                            </span>
                                        <% } else { %>
                                            <span class="error-count <%= task.errorCountClass %>">Ошибки: <%= task.errorCount %></span>
                                        <% } %>
                                    </div>
                                    <div style="display: flex; align-items: center;">
                                        <% if(task.showCriticality) { %>
                                            <span class="criticality <%= task.criticalityClass %>" onclick="toggleCriticality(event, 'criticality_<%= sectionIndex %>_<%= subsectionIndex %>_<%= taskIndex %>')">Критичность: <%= task.criticality %></span>
                                        <% } %>
                                        <span id="arrow_<%= sectionIndex %>_<%= subsectionIndex %>_<%= taskIndex %>" class="arrow">▼</span>
                                    </div>
                                </div>
                                <div id="desc_<%= sectionIndex %>_<%= subsectionIndex %>_<%= taskIndex %>" class="audit-details">
                                    <% if(task.showDetails){ %>
                                        <p><%= task.details %></p>
                                    <% } %>
                                    <% if(task.showWhoCanFix){ %>
                                        <p><strong>Кто может исправить:</strong> <%= task.whoCanFix %></p>
                                    <% } %>
                                    <% if(task.showHowToFix){ %>
                                        <p><strong>Как исправить:</strong></p>
                                        <ul>
                                            <% task.howToFix.forEach(function(fix) { %>
                                                <li><%= fix %></li>
                                            <% }) %>
                                        </ul>
                                    <% } %>
                                    <% if (task.hasTable || task.fileType === '.html' ) { %>
                                        <% if (task.fileType === '.xlsx' ) { %>
                                            <a href="<%= task.reportUrl %>" target="_blank" class="results-button">Результаты</a>
                                            <span class="report-path">➔ Документ отчёта в папке <strong>"tables/html"</strong></span>
                                        <% } else if (task.fileType === '.html' ) { %>
                                            <a href="<%= task.reportUrl %>" target="_blank" class="results-button">Результаты</a>
                                            <span class="report-path">➔ Документ отчёта в папке <strong>"tables/html"</strong></span>
                                        <% } %>
                                    <% } %>
                                </div>
                            </div>
                        <% }) %>
                    </div>
                <% }) %>
            </div>
        <% }) %>
      </div>
    </main>
    <script src="./dist/scripts.js"></script>
</body>
</html>

scripts.ts:
// scripts.ts

// Переключение отображения деталей задачи и стрелки
function toggleDetails(id: string): void {
  const element: HTMLElement | null = document.getElementById(id);
  const arrowId: string = id.replace("desc_", "arrow_");
  const arrow: HTMLElement | null = document.getElementById(arrowId);

  // Проверка наличия необходимых элементов
  if (!element || !arrow) {
      console.warn(`Element with id ${id} or arrow with id ${arrowId} not found.`);
      return;
  }

  // Переключение состояния отображения
  if (element.style.display === "none" || element.style.display === "") {
      element.style.display = "block";
      arrow.classList.add("up");
      arrow.textContent = "▲";
  } else {
      element.style.display = "none";
      arrow.classList.remove("up");
      arrow.textContent = "▼";
  }
}

// Функция для фильтрации задач
function filterTasks(): void {
  const searchInputElem = document.getElementById("searchInput") as HTMLInputElement;
  const filterSelectElem = document.getElementById("filterSelect") as HTMLSelectElement;
  if (!searchInputElem || !filterSelectElem) {
      console.warn("Search input or filter select element not found.");
      return;
  }

  const searchInput: string = searchInputElem.value.toLowerCase();
  const filterSelect: string = filterSelectElem.value;
  const auditTasks = document.getElementsByClassName("audit-task");
  const auditSections = document.getElementsByClassName("audit-section");
  const auditSubsections = document.getElementsByClassName("audit-subsection");

  // Фильтрация задач
  if (auditTasks) {
      Array.from(auditTasks).forEach((task) => {
          const taskElement = task as HTMLElement;
          const descriptionElem = taskElement.querySelector(".audit-header > div");
          const description = descriptionElem?.textContent?.toLowerCase() ?? "";
          const criticality = taskElement.getAttribute("data-criticality");
          const matchesSearch = description.includes(searchInput);
          const matchesFilter = filterSelect === "" || criticality === filterSelect;
          taskElement.style.display = (matchesSearch && matchesFilter) ? "" : "none";
      });
  }

  // Скрытие разделов без видимых задач
  Array.from(auditSections).forEach((section) => {
      const sectionElement = section as HTMLElement;
      const visibleTasksInSection = sectionElement.querySelectorAll('.audit-task:not([style*="display: none"])').length;
      sectionElement.style.display = (visibleTasksInSection === 0) ? "none" : "";
  });

  // Скрытие подпунктов без видимых задач
  Array.from(auditSubsections).forEach((subsection) => {
      const subsectionElement = subsection as HTMLElement;
      const visibleTasksInSubsection = subsectionElement.querySelectorAll('.audit-task:not([style*="display: none"])').length;
      subsectionElement.style.display = (visibleTasksInSubsection === 0) ? "none" : "";
  });

  // Сброс сортировки при фильтрации
  const sortSelectElem = document.getElementById("sortSelect") as HTMLSelectElement;
  if (sortSelectElem) {
      sortSelectElem.value = "";
      resetSort();
  }
}

// Функция для сортировки задач
function sortTasks(): void {
  const sortSelect = document.getElementById("sortSelect") as HTMLSelectElement | null;
  if (!sortSelect) {
      console.error("Элемент sortSelect не найден");
      return;
  }

  const sortOption = sortSelect.value;
  const auditSections = document.getElementsByClassName("audit-section");

  if (sortOption === "") {
      resetSort();
      return;
  }

  for (let i = 0; i < auditSections.length; i++) {
      const section = auditSections[i] as HTMLElement;
      const subsections = section.getElementsByClassName("audit-subsection");
      for (let j = 0; j < subsections.length; j++) {
          const subsection = subsections[j] as HTMLElement;
          let tasks = Array.from(subsection.getElementsByClassName("audit-task")) as HTMLElement[];
          tasks.sort((a, b) => {
              const errorA = parseInt(a.getAttribute("data-error-count") || "0", 10);
              const errorB = parseInt(b.getAttribute("data-error-count") || "0", 10);
              if (sortOption === "errorAsc") {
                  return errorA - errorB;
              } else if (sortOption === "errorDesc") {
                  return errorB - errorA;
              }
              return 0;
          });
          // Перестановка задач в DOM согласно сортировке
          tasks.forEach(task => subsection.appendChild(task));
      }
  }
}

// Функция для переключения подменю в навигации
function toggleSubsections(sectionIndex: number): void {
  const subsectionList = document.getElementById(`subsections-${sectionIndex}`);
  if (!subsectionList) {
      console.error(`Подраздел subsections-${sectionIndex} не найден`);
      return;
  }

  const mainLink = subsectionList.previousElementSibling as HTMLElement | null;
  if (!mainLink) {
      console.error(`Предыдущий элемент для subsections-${sectionIndex} не найден`);
      return;
  }

  if (subsectionList.style.display === "none" || subsectionList.style.display === "") {
      subsectionList.style.display = "block";
      mainLink.classList.remove("collapsed");
  } else {
      subsectionList.style.display = "none";
      mainLink.classList.add("collapsed");
  }
}

// Функция для подсветки активного пункта меню при клике и выполнения скролла
function highlightMenuItem(event: MouseEvent): void {
  const menuLinks = document.querySelectorAll('.sidebar a[href^="#"]');
  menuLinks.forEach(link => link.classList.remove("active"));
  const target = event.currentTarget as HTMLElement;
  target.classList.add("active");
}

// Функция для переключения стрелочки в критичности
function toggleCriticality(event: MouseEvent, id: string): void {
  event.stopPropagation(); // Предотвращает всплытие события до audit-header
  const criticalityElement = document.getElementById(id);
  if (!criticalityElement) {
      console.error(`Элемент с id ${id} не найден`);
      return;
  }
  criticalityElement.classList.toggle("open");
}

// Функция для сброса сортировки до исходного порядка
function resetSort(): void {
  const auditSections = document.getElementsByClassName("audit-section");
  for (let i = 0; i < auditSections.length; i++) {
      const section = auditSections[i] as HTMLElement;
      const subsections = section.getElementsByClassName("audit-subsection");
      for (let j = 0; j < subsections.length; j++) {
          const subsection = subsections[j] as HTMLElement;
          const tasks = Array.from(subsection.getElementsByClassName("audit-task")) as HTMLElement[];
          tasks.sort((a, b) => {
              const orderA = parseInt(a.getAttribute("data-original-order") || "0", 10);
              const orderB = parseInt(b.getAttribute("data-original-order") || "0", 10);
              return orderA - orderB;
          });
          // Перестановка задач в DOM согласно исходному порядку
          tasks.forEach(task => subsection.appendChild(task));
      }
  }
}

// Инициализация элементов при загрузке страницы
document.addEventListener("DOMContentLoaded", () => {
  const menuLinks = document.querySelectorAll<HTMLAnchorElement>('.sidebar a[href^="#"]');
  menuLinks.forEach(link => {
      link.addEventListener("click", function (event: MouseEvent): void {
          event.preventDefault(); // Предотвращаем стандартное поведение ссылки
          // Активируем ссылку и скроллим к соответствующему разделу
          highlightMenuItem(event);
          const targetId = this.getAttribute("href")!.substring(1);
          const targetElement = document.getElementById(targetId);
          if (targetElement) {
              targetElement.scrollIntoView({ behavior: "smooth" });
          }
      });
      // Добавляем подсветку активного пункта меню при наведении
      link.addEventListener("click", highlightMenuItem);
  });

  // По умолчанию раскрываем все подпункты
  const allSubsections = document.querySelectorAll<HTMLElement>(".subsections");
  allSubsections.forEach(subsection => {
      subsection.style.display = "block";
  });

  // Устанавливаем иконки для раскрытых подпунктов
  const allMainLinks = document.querySelectorAll<HTMLElement>(".main-section > a");
  allMainLinks.forEach(link => {
      link.classList.remove("collapsed");
  });
});