Как изменять динамически id на странице?

В общем есть блок внутри которого есть определенное значение, суть в том что блоки можно удалять, но проблема в том что id будет оставаться прежним, например если 8 блоков, я удаляю 7 блок, а остаются с 1 по 6 потом сразу 8 и всё, так вопрос в том, как можно сделать что бы они все шли по порядку, а 8 например становился 7, что бы не было пробелов?

Нашел рабочий пример в интернете как раз по вашей теме, тут есть одна функция, которая с помощью forEach всё сортирует, ну и обработчик события, который при клике на текст закрыть у которого класс close-button, удаляет элемент, и в конце удаления, вызывается метод сортировки, который придает именно id значениям нормальный вид, последовательный)

function sortItemIds() {
$(
'[class^=general_]').each(function (ind) {
ind =
1;
$(this).attr('class', 'general_' ind);
$(this).find('[align="center"]').attr('data-id', ind);
$(this).find('.close-button').attr('class', 'close-button close-button_' ind);

});
}
$(
"body").on("click", ".close-button", function () {
var $close = $(this);
var
$block = $close.prev();
var
$container = $close.parent();

const
index = $block.attr('data-id');
$('.general_' index).remove();
sortItemIds();
});

Сами html блоки, с кучей классов, при клике на внутренний блок Закрыть удаляется весь блок, но затем изменяется значение id и классов.

<div class="general_1"><div align="center" data-id="1">Блок 1<div class="close-button close-button_1">Закрыть
<div
class="general_2"><div align="center" data-id="2">Блок 2<div class="close-button close-button_2">Закрыть
<div
class="general_3"><div align="center" data-id="3">Блок 3<div class="close-button close-button_3">Закрыть
<div
class="general_4"><div align="center" data-id="4">Блок 4<div class="close-button close-button_4">Закрыть
<div
class="general_5"><div align="center" data-id="5">Блок 5<div class="close-button close-button_5">Закрыть