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

Frontend developer JavaScript
#1

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

#2

Нашел рабочий пример в интернете как раз по вашей теме, тут есть одна функция, которая с помощью 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">Закрыть