0xD34F

https://jsfiddle.net/4kgnz2x6/

метод, чьё имя состоит из трёх символов

const partition = (obj, f) => Object
  .entries(obj)
  .reduce((acc, [ k, v ]) => (
    acc[+!f(k, v)][k] = v,
    acc
  ), [ {}, {} ]);


const [ otherObj, anotherObj ] = partition(obj, k => [ 'a', 'd', 'e', 'f' ].includes(k));

$('.scheme-wrap polygon').click(function() {
  $(`.scheme-wrap__item[data-id="${this.dataset.id}"] .scheme-wrap__popup`).show();
});

или

.scheme-wrap__popup.visible {
  display: block;
}

document.querySelectorAll('.scheme-wrap polygon').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ currentTarget: { dataset: { id } } }) {
  const selector = `.scheme-wrap__item[data-id="${id}"] .scheme-wrap__popup`;
  const popup = document.querySelector(selector);
  if (popup) {
    popup.classList.add('visible');
  }
}

Группируете данные по месяцам:

const groupedUsers = users && users.reduce((acc, n) => {
  acc[new Date(n.dob).getMonth()].users.push(n);
  return acc;
}, [...Array(12)].map((n, i) => ({
  month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
  users: [],
})));

Рендерите их, например (это сразу всё; если надо - можете выбирать какой-то конкретный месяц):

{groupedUsers && groupedUsers.map(n => (
  <div key={n.month}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      <div key={user.id}>
        <h3>user #{user.id}</h3>
        <div>данные пользователя...</div>
      </div>
    ))}
  </div>
))}

Если буквально искать элемент "слева", то перебираем предыдущие элементы относительно кликнутой кнопки, пока не наткнёмся на инпут:

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('sbros')) {
    for (let el = e.target; el = el.previousElementSibling;) {
      if (el.classList.contains('fields')) {
        el.value = el.getAttribute('default-value');
        break;
      }
    }
  }
});

Лучше бы конечно добавить общую обёртку каждой паре инпут-кнопка и элементам между ними. Тогда код станет проще и короче - достаточно подняться от кликнутой кнопки к обёртке и внутри неё найти инпут, для обоих действий есть отдельные методы:

document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.sbros')) {
    const el = t.closest('здесь селектор обёртки').querySelector('.fields');
    el.value = el.getAttribute('default-value');
  }
});

Ещё вариант - можно вычислять индекс кликнутой кнопки и обращаться к инпуту с таким же индексом:

const inputs = document.querySelectorAll('.fields');
const buttons = [...document.querySelectorAll('.sbros')];
buttons.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const el = inputs[buttons.indexOf(e.target)];
  el.value = el.getAttribute('default-value');
}

На части какого размера надо порезать объект: const chunkSize = 10;.

Режем:

const arr = [];
let i = -1;

for (const k in obj) {
  const j = (++i / chunkSize) | 0;
  (arr[j] = arr[j] || {})[k] = obj[k];
}

или

const chunked = (arr, chunkSize) =>
  Array.from(
    { length: Math.ceil(arr.length / chunkSize) },
    (n, i) => arr.slice(i * chunkSize, (i + 1) * chunkSize)
  );


const arr = chunked(Object.keys(obj), chunkSize).map(n => {
  return n.reduce((acc, k) => (acc[k] = obj[k], acc), {});
});

или

function* chunked(data, chunkSize) {
  const iter = data[Symbol.iterator]();

  for (let chunk = [], n = {}; !n.done && (n = iter.next());) {
    if ((n.done && chunk.length) || chunk.push(n.value) === chunkSize) {
      yield chunk;
      chunk = [];
    }
  }
}


const arr = Array.from(chunked(Object.entries(obj), chunkSize), Object.fromEntries);

Object.values(arr.reduce((acc, n) => {
  const k = n.value.fromVenueId.value;
  const v = n.value.totalUsers.value;

  (acc[k] = acc[k] || { fromVenueId: k, totalUsers: 0 }).totalUsers += v;

  return acc;
}, {}))

Вырезаете selectedProducts, вместо него используете в v-model свойства checked элементов products. Отключить чекбокс - свойства disabled у вас уже есть, просто привяжите их значения к чекбоксам.

<input
  type="checkbox"
  v-model="product.checked"
  :disabled="product.disabled"
>

Ну и в отсутствие selectedProducts следует переписать вычисляемое свойство totalPrice:

computed: {
  totalPrice() {
    return this.products.reduce((acc, n) => acc + n.checked * n.price, 0);
  },
},

event.target.tagName != 'button'

Ясно:

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

Есть и менее явный косяк в этой проверке - все ли существующие на странице кнопки должны что-то там удалять? Даже если сейчас это так, будет ли так всегда? Лучше проверять наличие класса:

event.target.classList.contains('remove-button')

// или

event.target.matches('.remove-button')

Сколько может быть элементов с одинаковыми id? - один. Там, где id повторяются, замените их классами.

$('.show').click(function() {
  $(this).hide().next('.var').slideDown().find('.hide').show();
});

$('.hide').click(function() {
  $(this).hide().closest('.var').slideUp().prev('.show').show();
});

У вас в школе по английскому была честная двойка, или давали взятки ради троек? Ну, то есть - откройте словарь, и посмотрите, как переводится слово "next". Потом посмотрите в каком порядке расположены ваши элементы.

Ключи добавьте.

Да, в документации говорится про ключи в связи со списками, но реально область их применения шире. Если хотите, чтобы какой-то элемент пересоздавался в случаях вроде вашего, надо назначить различные ключи элементам, создающимся в различных ветках switch'а, условного оператора и т.п. Например: ключей нет - ключи есть.

Но вообще, правильно будет назначать классы в зависимости от значения какого-то свойства в стейте. Тогда и подобных проблем не будет, ключи не понадобятся.

rating = Math.max(1, Math.ceil((e.clientX - горизонтальнаяКоординатаЭлемента) / ширинаЭлемента * 5))

https://jsfiddle.net/xqeLtz6r/

{this.state.ad.map(n => (
  <div key={n.id}>
    <h2>{n.title}</h2>
    <div>{n.images.map(src => <img src={src} />)}</div>
  </div>
))}

Вот метод группировки (не только массивов, но и любых итерируемых объектов):

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 grouped = {};

  for (const n of data) {
    const k = getKey(n);
    (grouped[k] = grouped[k] || []).push(getVal(n));
  }

  return grouped;
}

Как использовать в вашем случае:

group(arr, 'room')
// или
group(arr, n => n.room)

Но можно и так:

group(Array(5).keys(), n => n % 2 ? 'нечётные' : 'чётные')

Или так:

group('a8-C!39', n => (
  n.toLowerCase() !== n.toUpperCase() ? 'буква' :
  !Number.isNaN(+n)                   ? 'цифра' :
                                        'другое'
))

Или вот ещё вариант:

<input name="xxx" value="69">
<input name="xxx" value="187">
<input name="xxx" value="666">
<input name="yyy" value="-1">

group(document.querySelectorAll('input'), 'name', n => +n.value)

dangerouslySetInnerHTML