Сергей Ержович

Гугли "mysql relationships": https://code.tutsplus.com/ru/articles/sql-for-begi...

Сделай 4 инпута, при вводе в него цифры переключай на следующий инпут и тд..
Вообще примеров полно, можешь на codepen поискать что нить по запросу "pin code"
https://codepen.io/rehhouari/pen/PoWVEKW
https://codepen.io/danielsintrao/pen/KWozJd
https://codepen.io/VadimMalykhin/pen/qPVvop

<div class="card">
    <img src="https://hsto.org/webt/62/20/e0/6220e03be7247161494475.jpeg" alt="background">
  </div>

.card {
  display: flex;
  justify-content: center;
}

Но в твоём случае можно

<div class="card">
    <img src="https://hsto.org/webt/62/20/e0/6220e03be7247161494475.jpeg" class="back" alt="background">
  </div>

.back {
  display: flex;
  margin: auto;
}

По хорошему тебе надо переписать всё) ты опираешься на классы и клики, а надо на события video элемента, https://developer.mozilla.org/en-US/docs/Web/API/H.... так как у кого то могут быть мультемедия кнопки, или на пробел нажал например видео остановилось, или воспроизвести его через контекстное меню 2й кнопкой кликнуть и выбрать воспроизвести. в общем тебе надо подписываться на события меди элемента а не опираться на клики по нему

const isDiff = arrBd.find(
	(item, index) =>
		item.id !== arrForSite[index].sku ||
		item.photo_url !== arrForSite[index].image_url ||
		item.parent !== arrForSite[index].category
);

if(isDiff) {
console.log('Ключи разные');
}

Можно функцию сделать в пару строк

const findDiff = (arr1, arr2, mapping) =>
	arr1.find((item, index) =>
		mapping.find((m) => item[m[0]] !== arr2[index][m[1]])
	);

const diff = findDiff(arrBd, arrForSite, [
	["id", "sku"],
	["photo_url", "image_url"],
	["parent", "category"],
]);

В общем проблема была в tsconfig, стоял "target": "ESNext", поменял на ES6 стало норм

Регулярные выражения для этого отлично подходят.

$replaces = [
	'#3d#' => '3D',
	'#\bmax\b#' => 'MAX', //меняем только вхождения в целых словах, слово max заменится на MAX, в слове maximum max не поднимется.
	'#program#is' => 'PROGRAM' //меняем любые вхождения: program, Program, PROgram и тд... получим PROGRAM, так же например слово programfiles заменится на PROGRAMfiles, если надо целиком вхождение в слово обернуть в \bслово\b как в примере с max
];
	
function replacer($params, $string) {
	$from = array_keys($params);
	$to = array_values($params);
	return preg_replace($from, $to, $string);
}

$TheTitle = 'maximum best program for you - this is a 3d max - super  puper pRoGrAm';

$titleNew = replacer($replaces, $TheTitle);

var_dump($titleNew); //string(70) "maximum best PROGRAM for you - this is a 3D MAX - super  puper PROGRAM"

live example: https://3v4l.org/KlGKZ