Tim

$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'
});

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'

computed: {
  grouped() {
    return this.arr.reduce((acc, n) => ((acc[n.group] ??= []).push(n), acc), {});
  },
},

<v-expansion-panels>
  <v-expansion-panel v-for="(items, groupName) in grouped">
    <v-expansion-panel-header>{{ groupName }}</v-expansion-panel-header>
    <v-expansion-panel-content>
      <div v-for="n in items">{{ n.name }}</div>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

/(?=.*\d)(?=.*[a-z])/i.test(str)

Целенаправленно - нет. Это уже прошлое. Хорошо, если знаешь, ничего страшного, если не знаешь. Действительно, будешь иногда встречать легаси код или какие-нибудь библиотеки, которые юзают Jquery, но если ты хорошо знаешь нативный JS. ты всегда сможешь загуглить синтакcис jquery и быстро разобраться. Там ничего сложного.