0xD34F

const numChunks = 6;
const chunkLen = arr.length / numChunks | 0;
const chunks = Array.from({ length: numChunks }, (n, i) => {
  return arr.slice(i * chunkLen, i === numChunks - 1 ? arr.length : (i + 1) * chunkLen);
});

Во-первых - всё срабатывает. Попытайтесь осознать разницу между "не срабатывает" и "срабатывает не так, как ожидается".

Во-вторых - обработчик остаётся висеть потому, что вы передаёте в removeEventListener не то, что передавали в addEventListener. Смотрите сами:

document.addEventListener('click', clickerOut(parent));

document.removeEventListener('click', clickerOut);

clickerOut(parent) и clickerOut - это что по-вашему, одно и то же? Никак нет.

Исправляем:

function clickerOut(parent) {
  return function handler(e) {    
    ...
    document.removeEventListener('click', handler);
  }
}

label, permitted content:

Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.

Теряете значение, которое возвращает setInterval. Нужен ещё один useState.

При обновлении numbers внутри addRandomNumber используете значение, которое было на момент создания addRandomNumber. Функции обновления состояния вместо нового значения можно передать функцию - она получает в качестве аргумента текущее значение и должна вернуть новое.

function App() {
  const [ numbers, setNumbers ] = React.useState([ 1, 2, 3 ]);
  const [ timerId, setTimerId ] = React.useState(null);

  const add = () => setNumbers(numbers => [ ...numbers, Math.random() * 10 | 0 ]);
  const start = () => setTimerId(setInterval(add, 1000));
  const stop = () => (clearInterval(timerId), setTimerId(null));

  return (
    <div>
      <ul>
        {numbers.map(n => <li>{n}</li>)}
      </ul>
      <div>
        <button onClick={add} disabled={timerId}>Добавить число</button>
        <button onClick={start} disabled={timerId}>Старт</button>
        <button onClick={stop} disabled={!timerId}>Стоп</button>
      </div>
    </div>
  );
}

$key = 'property';
$val = 2;

$toReverse = array_filter($array, function($n) use($key, $val) {
  return $n[$key] === $val;
});

$newArray = array_map(function($n) use(&$toReverse, $key, $val) {
  return $n[$key] === $val ? array_pop($toReverse) : $n;
}, $array);

Формат данных конечно просто ублюдочный.

Сперва соберём нормальный массив объектов вместо этого позорища:

const arr = Object
  .entries(obj)
  .reduce((acc, [ k, v ]) => (
    k = k.match(/([a-z]+)(\d+$)/),
    (acc[k[2]] ??= {})[k[1]] = v,
    acc
  ), []);

Затем посчитаем, у кого чего сколько:

const os = Object.fromEntries(arr.map(n => [ n.system, 0 ]));
const count = arr.reduce((acc, n) => ((acc[n.name] ??= { ...os })[n.system]++, acc), {});

Ну и выведем результаты:

console.log(Object
  .entries(count)
  .map(n => `${n[0]}: ${Object.entries(n[1]).map(m => m.join(' - ')).join(', ')}`)
  .join('\n')
);

print('\n'.join(map(', '.join, arr)))

От того, что вы удалили класс, обработчик события никуда не девается.

Сделайте однократно срабатывающий обработчик события:

$('.el1--closed').one('click', function() {
  $(this)
    .siblings()
    .slideToggle();
});

Или, вешайте делегированный обработчик:

$('.block').on('click', '.el1--closed', function() {
  $(this)
    .removeClass('el1--closed')
    .siblings()
    .slideToggle();
});

дошел до "v-model изначально равным соответствующему значению из объекта data" и не понимаю как это сделать

При создании массива, описывающего элементы формы, строки с путями к значениям режете на куски (разделитель - точка). Используя полученные массивы, достаёте из data значения, помещаете их в объекты, описывающие элементы формы. Всё, можно использовать v-model:

<el-form-item v-for="n in formItems">
  <el-input v-model="n.value" />

https://jsfiddle.net/3q706bp9/

Если же хотите, чтобы при использовании v-model изменялись значения в data, то после разрезания строки с путём выдёргиваете из полученного массива последнее значение - это ключ, имя свойства. Объект, в котором это свойство находится, достаёте из data, основываясь на том, что в массиве осталось. Кладёте ключ и полученный объект в объект, описывающий элемент формы. А в шаблоне делаете так:

<el-form-item v-for="n in formItems">
  <el-input v-model="n.obj[n.key]" />

Поскольку объект в data и объект в объекте, описывающем элемент формы - один и тот же, то при изменении второго, будет меняться и первый.

https://jsfiddle.net/x6ncpo90/

Сохраняете true/false, а читаете 'true'/'false'. В куках же строки хранятся. А булевым эквивалентом любой непустой строки является true. Поэтому результат работы v-if/v-show одинаков, вне зависимости от прочитанного значения.

const arr = useMemo(() => {
  const multiple = [ 'Format', 'Stars' ];
  return str
    .split('\n\n')
    .map(n => n
      .split('\n')
      .reduce((acc, m) => (
        m = m.split(/(?<=^[^:]+): /),
        acc[m[0]] = multiple.includes(m[0]) ? m[1].split(', ') : m[1],
        acc
      ), {}));
}, [ str ]);

<ul>
  {arr.map(n => (
    <li>
      <h3>{n.Title}</h3>
      <div>Year: {n['Release Year']}</div>
      <div>Format: <ul>{n.Format.map(m => <li>{m}</li>)}</ul></div>
      <div>Stars: <ul>{n.Stars.map(m => <li>{m}</li>)}</ul></div>
    </li>
  ))}
</ul>

https://jsfiddle.net/s7thmcn8/

Поместить картинку после input'а. Если важно, чтобы отображалась до - тогда задать display: flex родителю и выставить order.

Что значит "основной"? Показываемый при инициализации? Если так, то

data: () => ({
  swiperOptions: {
    initialSlide: здесь номер слайда,
  },
}),

<swiper :options="swiperOptions">

arr.reduce((acc, n) => {
  const { x, y } = acc[acc.length - 1] || {};
  for (let i = 1; n.x - x - i >= 1; i++) {
    acc.push({ x: `${+x + i}`, y });
  }

  acc.push({ ...n });

  return acc;
}, [])

кнопка будет disabled, если все три поля input будут пустые и наоборот, если все поля заполнены, то кнопка станет enabled

А если поля заполнены, но не все - одно или два? Это получается какое-то третье состояние, которого у кнопки быть не может. Вам следует больше внимания уделять формулировкам стоящих перед вами задач. "Наоборот" для "все пустые" - это "хотя бы одно заполнено":

const button = document.querySelector('селектор кнопки');
const inputs = [...document.querySelectorAll('селектор инпутов')];
const onInput = () => button.disabled = inputs.every(n => !n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
onInput();

И, аналогично, для "все заполнены" - "хотя бы одно пустое", вместо every будет some.

onMarkerMouseOver() {
  this.openPopup();
}

<Marker onMouseOver={this.onMarkerMouseOver}>

https://jsfiddle.net/2vox61wf/

usort($arr, function($a, $b) {
  $t = strcmp($a['type'], $b['type']);
  return $t ? $t : $a['id'] - $b['id'];
});

Обновляете стейт дочернего компонента вместо родительского.

Надо перенести метод handleInput в родительский компонент и передавать в дочерний:

<Input handleInput={this.handleInput} />

В дочернем, соответственно, доставать его не непосредственно из текущего экземпляра, а из props:

onChange={this.props.handleInput}

$('.cart_qty').change(({ target: t }) => {
  $(t)
    .closest('селектор блока с товаром')
    .find('.shopcart__item-total')
    .text(function() {
      return t.value * this.dataset.price;
    });
});

или

document.querySelectorAll('.cart_qty').forEach(n => n.addEventListener('change', onChange));

function onChange({ target: t }) {
  const total = t.closest('селектор блока с товаром').querySelector('.shopcart__item-total');
  total.innerText = t.value * total.dataset.price;
}