0xD34F

Классы замените data-атрибутом, в зависимости от значения которого будет стилизоваться сам .item, а не вложенные в него элементы:

.item[data-xxx="1"]::before { background: #444; }
.item[data-xxx="2"]::before { background: #555; }
.item[data-xxx="3"]::before { background: #666; }
.item[data-xxx="4"]::before { background: #777; }
.item[data-xxx="5"]::before { background: #888; }
.item[data-xxx="6"]::before { background: #999; }

Соответственно, засовывать шесть div'ов в каждый .item не надо:

$('#counter').on('input', e => {
  $('#results').html('<div class="item"></div>'.repeat(e.target.value));
}).trigger('input');

// или

const results = document.querySelector('#results');
const counter = document.querySelector('#counter');

counter.addEventListener('input', ({ target: { value } }) => {
  results.innerHTML = Array(++value).join('<div class="item"></div>');
});
counter.dispatchEvent(new Event('input'));

Нет div'ов - не надо ни у кого переключать видимость. Достаточно выставить атрибуту случайное значение:

$('#view').on('click', () => $('.item').attr('data-xxx', () => 1 + Math.random() * 6 | 0));

// или

document.querySelector('#view').addEventListener('click', () => {
  document.querySelectorAll('.item').forEach(n => n.dataset.xxx = -~(Math.random() * 6));
});

https://jsfiddle.net/L76mav3t/

preg_match('~(?<=vk\.com/)\S+~', $str, $match);
$group_name = $match[0];

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  const next = t.matches('input[type="button"]') && t.parentNode.nextElementSibling;
  const input = next && next.querySelector('input');
  input && (input.type = 'text');
});

Вместо состояния всех элементов храните имя/id/индекс открытого:

state = {
  opened: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ opened }) => ({
    opened: opened === name ? null : name,
  }));
}

https://jsfiddle.net/bexgm6uz/

Object.fromEntries((url.match(/(?<=utm_).+?=[^&]*/g) || []).map(n => n.split('=')))

или

[...url.matchAll(/utm_([^=]+)=([^&]*)/g)].reduce((acc, [ , k, v ]) => (acc[k] = v, acc), {})

или

Array
  .from(new URL(url).searchParams)
  .filter(n => n[0].startsWith('utm_'))
  .reduce((acc, n) => ({ ...acc, [n[0].slice(4)]: n[1] }), {})

Что можно сделать:

1. Установить значение select'а: select.value = '0';
   
2. Установить индекс выбранного option'а: select.selectedIndex = 0;
   
3. Назначить true в качестве значения свойства selected тому option'у, на который хотите переключиться:
   
   

   select[0].selected = true;
   // или
   select.options[0].selected = true;
   // или
   select.children[0].selected = true;
   // или
   select.firstElementChild.selected = true;
   // или
   select.querySelector('[selected]').selected = true;

   
   
4. Перезаписать внутреннюю разметку select'а: select.innerHTML += '';
   

Не дублируя код инициализации

Очевидно же - сделать функцию, которая будет принимать id/элемент (контейнер для карты) и данные маркеров.

Храните вместо значения его индекс. При клике увеличивайте его на единицу.

Соответственно, если надо значение показать:

{{ массивВозможныхЗначений[индексЗначения] }}

Ну или, если будете хранить сами значения - при клике ищите индекс значения в массиве, берёте следующее:

следующееЗначение = массивВозможныхЗначений[массивВозможныхЗначений.indexOf(текущееЗначение) + 1]

UPD. Как это может выглядеть: раз, два.

const entries = Object.entries(obj);
const mustBeRemoved = v =>
  (v instanceof Object && !Object.keys(v).length) ||
  (!v && typeof v !== 'boolean');

Собираем новый объект:

const newObj = Object.fromEntries(entries.filter(n => !mustBeRemoved(n[1])));

Удаляем из существующего:

entries.forEach(n => mustBeRemoved(n[1]) && delete obj[n[0]]);

function createTree($data, $depthField) {
  $tree = [];

  foreach ($data as $n) {
    $arr = &$tree;

    for ($depth = 0; $n[$depthField] > $depth; $depth++) {
      $arr = &$arr[count($arr) - 1]['children'];
    }

    $arr[] = array_merge($n, [ 'children' => [] ]);
  }

  return $tree;
}


$tree = createTree($arr, 'depth');

https://jsfiddle.net/gqa2wrkp/

Что и куда будем копировать:

const source = document.querySelector('.box1').children;
const target = document.querySelector('.box2');

Копируем:

target.firstElementChild.insertAdjacentHTML('afterend', Array
  .from(source, ({ innerText: n }) => `<p><a href="#${n}">${n}</a></p>`)
  .join('')
);

или

target.children[0].after(...Array.prototype.map.call(source, ({ textContent: n }) => {
  const p = document.createElement('p');
  const a = document.createElement('a');
  a.href = '#' + n;
  a.textContent = n;
  p.append(a);
  return p;
}));

preg_match('\/\/.+\?', $embed, $matches);

Разделители где?

echo $matches;

Это массив, так что $matches[0]

Так что надо-то - задавать карточкам различные стили (а это и есть "переключение вида"), или переключаться между разными наборами карточек (которые вы показали в песочнице)?

function updateFraction(slider) {
  const { params, activeIndex } = slider;

  slider.$el
    .find(`.${params.pagination.currentClass}`)
    .text(`${activeIndex + 1} - ${activeIndex + params.slidesPerView}`);

  slider.$el
    .find(`.${params.pagination.totalClass}`)
    .text(slider.slides.length);
}

on: {
  init() {
    setTimeout(updateFraction, 0, this);
  },
  slideChange() {
    updateFraction(this);
  },
  resize() {
    updateFraction(this);
  },
},

https://jsfiddle.net/1xLrtyqw/

Потому что

data('.nights')

data('.guests')

Не кажется ли вам, что как-то многовато точек?

Не надо закидывать картинки в стейт, пусть компонент получает их через props.

Добавите в стейт свойство, содержащее индекс отображаемой картинки, делайте ему +/- 1, в зависимости от нажатой кнопки, выход за границы массива поправляйте через взятие остатка от деления на его длину:

state = {
  active: 0,
}

nextSlideHandler = ({ target: { dataset: { step } } }) => {
  const len = this.props.images.length;

  this.setState(({ active }) => ({
    active: (active + len + +step) % len,
  }));
}

<button data-step="-1" onClick={this.nextSlideHandler} className="prev">prev</button>
<button data-step="+1" onClick={this.nextSlideHandler} className="next">next</button>
<img src={this.props.images[this.state.active]} />

https://jsfiddle.net/e7vzm9kq/

const [ active, setActive ] = useState(null);
const item = test.title[active];

const onClick = e => setActive(e.target.dataset.id);

Кнопки:

{Object.keys(test.title).map(n =>
  <button key={n} data-id={n} onClick={onClick}>{n}</button>
)}

Выбранный элемент:

{item && <div>{item.title} ---- {item.category}</div>}

Добавьте дочернему элементу обработчик клика, где будет производится остановка всплытия события:

$('div > span').click(e => e.stopPropagation());

Или в обработчике клика родительского элемента проверяйте, откуда пришло событие, если от дочернего элемента - ничего делать не надо:

$('div').click(function(e) {
  if ($(e.target).is('span')) {
    return;
  }

  ...
});

$res['href'] = array_values($res['href']);