Tim

На первом скрине не PHP-код, а обычный текст, так как нет открывающего тэга <?php
Цвет отдельных участков кода определяется цветовой темой, Settings -> Workbench -> Appearance -> Color Theme.

перезагрузить страницу на этом URL то все ломается и вылезает ошибка 404 джанго.

типичная проблема роутинга на клиенте, решается, например, через try_files $uri /index.html в nginx

первым, кто открывает файл, должен использовать функцию flock над идентификатором файла fopen

$file = fopen('filename.txt', 'r');
// пробуем установить эксклюзивную блокировку
if (flock($file, LOCK_EX)) {
    // выполнение операций чтения
    // ...
    
    // освобождаем блокировку
    flock($file, LOCK_UN);
} else {
    echo "Не удалось установить блокировку на файл.\n";
}
fclose($file);

это системная фича posix, не привязанная к языку программирования

p.s. аналогичные механизмы есть у windows, при открытии файла указывается тип блокировки shared...

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

let sum = 0;

for (let [i, val] of arr.entries()) {
  if (i % 2 === 0) {
    sum = sum + val
  }
}

console.log(sum)

ХЗ по условию 0 является ли четным числом иногда выделяют этот момент, в моем решении является четным

$grouped = array_values(array_reduce($arr, function($acc, $n) {
  $acc[$n['api_id']][] = $n;
  return $acc;
}, []));

const moves = [];

... 
moves.push(JSON.stringify(jsonmove));
...

const datamove = "[\n" + moves.join(",\n") + "\n]";

Это если исходить из того, что вам нужен именно такой формат, когда каждый элемент массива на отдельной строке.
Иначе же можно упростить до

const moves = [];

... 
moves.push(jsonmove);
...

const datamove = JSON.stringify(moves);

document.addEventListener('click', e => {
  const btn = e.target.closest('.more-btn');
  for (const n of document.querySelectorAll('.more-btn')) {
    n.classList.toggle('active', n === btn && !n.classList.contains('active'));
  }

  // или

  document.querySelectorAll('.more-btn').forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove']('active');
  }, e.target.closest('.more-btn'));
});

Первое что нужно понять, таймер работает асинхронно, а значит будет выполнен после цикла.
Второе - let имеет блочную область видимости (переменная видна в том блоке, где была объявлена, при этом первый операнд for считается тем же блоком, что и тело цикла)
Третье - циклы создают новый скоуп на каждую итерацию (на каждой итерации будет свой let i, при условии что этот оператор внутри цикла)

Ну и еще, в Ваших примерах 1000 относится не к таймауту, это просто бесполезная операция, а таймаут получит значение по умолчанию - 0, думаю это не совсем то, что Вы ожидаете.

Еще один важный момент, функциональное выражение (а стрелочная функция - это тоже функциональное выражение) внутри цикла будет создавать по функции на каждой итерации цикла. Это очень плохо и по памяти и по производительности (такие функции еще и компилироваться и оптимизироваться будут раздельно). И если в случае с let внутри цикла функции хотя бы будут отличаться замыканием (каждая замкнет свою i), то в первом случае будет 5 абсолютно идентичных функций.
Тут можно очень хорошо показать себя, если помимо объяснения принципов работы вспомнить, что setTimeout умеет передавать аргументы в свой колбэк:

const f = i => {
  console.log(i);
};
for (let i = 0; i < 5; i++) {
  setTimeout(f, 1000, i);
}

Нет

Во первых для отправки формы используйте button типа submit
<button type="submit" id='btn'>Отправить</button>
Во вторых вешайтесь на событие формы submit это отправка и preventDefault для отмены
типа

document.querySelector("#form").addEventListener("submit",function(e){	
  let isValid = true;
  	 //Какие-то проверки
    if(!isValid)
    	e.preventDefault();//отмена
  });

return потому что надо
map() должен что-то вернуть.

Потому что ненадо использовать питон стайл в жсе.)

А если по делу, то темплейт стринг (``) используются не только в виде строк, но и как аргументы функции. Иными словами из-за такое действие преттиера предотвращает вот эту ситуацию:

console.log()
`${123}dsa`
// =
console.log()`${123}dsa`

То есть сначала выполнится функция console.log, которая в свою очередь вернёт андефайнд, а далее андефайнд будет использован как функция, что приведёт к:

Uncaught TypeError: console.log() is not a function

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

console.log()
;`${123}dsa`

будет идентична такой:

console.log();
`${123}dsa`;

и никакой ошибки не будет.

В стрелочной функции, если тело из одной строки, можно фигурные скобки опустить. Тогда будет return по-умолчанию.

const expression = /{{\s+?(\w+)\s+?}}/g;

const pasteParams = (string, params) => {
  return string.replace(expression, (match, key) => key in params
    ? params[key]
    : key
  );
};

pasteParams('<ul class="{{ className }}"></ul>', {
  className: 'my-class'
});

Соберём содержимое вложенных массивов в один:

const flatArr = arr.flatMap(n => Array.isArray(n.DOP) ? n.DOP : []);
// или
const flatArr = Array.prototype.concat.apply([], arr.map(n => n.DOP ?? []));
// или
const flatArr = arr.reduce((acc, n) => (n.DOP && acc.push(...n.DOP), acc), []);

Получим уникальные объекты:

const unique = Object.values(Object.fromEntries(flatArr.map(n => [ n.NAME, n ])));
// или
const unique = flatArr.filter(function({ NAME: n }) {
  return !(this[n] = this.hasOwnProperty(n));
}, {});
// или
const unique = flatArr.filter((n, i, a) => n === a.find(m => m.NAME === n.NAME));

this.setState(({ items }) => ({
  items: items.map((n, i) => ({ ...n, id: i })),
}));

Но вообще - зачем перезаписывать? Сразу кладите в стейт то, что нужно. Если, например, массив попадает в компонент через props, то

state = {
  items: this.props.items.map((n, i) => ({ ...n, id: i })),
}

+str.match(/\d+/) || 'not a number'