Dzambulat

Как получить массивоподобные или итерируемые данные в отсортированном виде - функция сортировки получает данные и функцию, принимающую элемент данных и возвращающую его вес (может быть числом или строкой); собирается массив пар, состоящих из элементов данных и их весов; полученный массив сортируется, функция сравнения проверяет, как веса элементов соотносятся между собой; из отсортированного массива извлекаются элементы исходных данных:

const sorted = (data, key) => Array
  .from(data, n => [ key(n), n ])
  .sort(([a], [b]) => a < b ? -1 : +(a > b))
  .map(n => n[1]);

Как отсортировать содержимое DOM-элемента - да просто добавить ему это содержимое в отсортированном виде:

const sortChildren = (el, key) =>
  el.append(...sorted(el.children, key));

Направление сортировки будем указывать с помощью data-атрибута:

<button data-order="-1">От большего к меньшему</button>
<button data-order="+1">От меньшего к большему</button>

Кнопкам назначаем общий обработчик клика, где сортируем содержимое .catalog-items (вес элемента - число внутри, умноженное на направление сортировки), кликнутой кнопке класс добавляем, у остальных убираем:

const wrapper = document.querySelector('.catalog-items');
const buttons = document.querySelectorAll('[data-order]');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  const order = +t.dataset.order;
  sortChildren(wrapper, el => parseInt(el.innerText) * order);
  buttons.forEach(n => n.classList.toggle('active', n === t));
}

const MCITEMDIFFERENCE = document.querySelectorAll('.mc__span');

MCITEMDIFFERENCE.forEach((element)=>{
    if (element.innerHTML.startsWith("+") {
        element.classList.add("plusDifference");
    }
    if (element.innerHTML.startsWith("-") {
        element.classList.add("minusDifference");
    }
})

Dzambulat, а круглые скобки кто будет после if закрывать?
Вам ошибка синтаксиса в консоле вообще ни о чём не намекает?

Вот где исправлено и работает: