Recreator

https://www.30secondsofcode.org/js/s/function-base...

const groupBy = (collection, extractKey) => 
  collection.reduce((acc, item) => {
    const key = extractKey(item);
    acc[key] ??= [];
    acc[key].push(item);
    return acc;
  }, {});

const data = groupBy(array, (person) => person.role);

UPD: Можно использовать Object.groupBy (совсем забыл про него) если устраивает поддержка.
Object.groupBy(array, (person) => person.role);

Первый вариант svg mask.
плюсы: не требует js
минусы: нельзя применить backdrop-filter


Второй вариант svg clip-path.
плюсы: можно применить backdrop-filter
минусы: требует js и желательно ResizeObserver

Сам же и отвечу.
Ctrl+F - вводим значение
Ctrl+Shift+L - выделяем их
Ctrl+Shift+K (предварительно закрыв окно поиска) - удаляем все выделенные строки

const parseDate = (date) => Date.parse(date.split('/').reverse().join('-'));
const findClosest = (list, date = (new Date()).toLocaleDateString('en-GB')) => {
  const findDate = parseDate(date);
  return list.reduce(
    (acc, cur) => {
      const delta = parseDate(cur.date) - findDate;
      return (delta >= 0 && delta < acc.delta) ? { delta, el: cur } : acc;
    },
    { delta: Number.MAX_SAFE_INTEGER, el: null },
  ).el;
};

Делаем просто:

const result = Object.values(cars.reduce((acc, n) => (
  (acc[n.make] ??= { make: n.make, attr: [] }).attr.push(n),
  acc
), {}));

Делаем сложно:

function group(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const result = new Map;

  for (const n of data) {
    const k = getKey(n);
    result.set(k, result.get(k) ?? []).get(k).push(getVal(n));
  }

  return result;
}

const result = Array.from(
  group(cars, 'make'),
  ([ make, attr ]) => ({ make, attr })
);

Не «как», а «когда».

Там, где console.log() выводит успешно то, что надо — там же и инициализируйте autocomplete.