Vanilla JS,单击按钮以删除div后正确重置ID索引

When I click the button with id="add-quest", it will clone the last element of <div data-type="quest-form-fields">, increment the index id, and add the cloned div below the original div... Those things work fined, but not with the event listener of removing items. When the <img id="quest-some_index-x-btn">were clicked, it should supposed to be removing the div by ID Index, and reset its indexes. And what happened is, for example: I clicked <img id="quest-1-x-btn">, the <div id="quests-1-container">will be removed (which I expected), but instead it also removes the id="quests-2-container" up to the last-nth element.

<div>
    <div data-type="quest-form-fields" id="quests-0-container">
        <div>
            <label id="quests-0-label">Quest 1:</label>
            <img id="quests-0-x-btn" src="some-image.png">
        </div>

        <input id="quests-0-quest" required type="text" value="">

        <div>
            <label>Answer:</label>
            <input id="quests-0-answer" required type="text" value="">
        </div>

    </div>

    <div>

        <div id="add-quest">
            Add
        </div>

    </div>
</div>

我知道这很丑。我不是JS开发人员。

// Quest Dynamic Fields

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function resetxBtnEventListener(){
    let xBtn = document.querySelectorAll('img[id^="quests-"][id$="-x-btn"]')
    for (let i=0; i < xBtn.length; i++){
//        console.log('adding event listener to i:' + i)

        function x() {
            console.log("@" + i)
            if ((document.querySelectorAll('div[id^="quests-"][id$="-container"]').length !== 1)){
                console.log('i:' + i)
                document.querySelector('div[id^="quests-' + i +'"][id$="-container"]').remove()
                resetIndex()
            }
           }

        xBtn[i].addEventListener('click', x)
    }

}

function resetIndex(){
    let questFields = document.querySelectorAll('div[data-type="quest-form-fields"]')

    for (let i=0; i < questFields.length; i++){
//        console.log('reset index of i:' + i)
        questFields[i].id =  'quests-' + i + '-container'
        questFields[i].querySelector('input[id$="-quest"]').id = 'quests-' + i + '-quest'
        questFields[i].querySelector('input[id$="-answer"]').id = 'quests-' + i + '-answer'
        questFields[i].querySelector('img[id$="-x-btn"]').id = 'quests-' + i + '-x-btn'
        questFields[i].querySelector('label[id$="-label"]').id = 'quests-' + i + '-label'
        questFields[i].querySelector('label[id$="-label"]').innerHTML = 'Quest ' + (i + 1) + ':'
    }

    resetxBtnEventListener()

}

var addQuestBtn = document.getElementById('add-quest')

addQuestBtn.addEventListener('click', (e) => {
    let questFields = document.querySelectorAll('div[data-type="quest-form-fields"]')
    let clone = questFields[questFields.length - 1].cloneNode(true)
    let new_id_num = parseInt(clone.querySelectorAll('input[id$="-quest"]')[0].id[7]) + 1

    clone.id = 'quests-' + new_id_num + '-container'
    clone.querySelector('input[id$="-quest"]').id = 'quests-' + new_id_num + '-quest'
    clone.querySelector('input[id$="-answer"]').id = 'quests-' + new_id_num + '-answer'
    clone.querySelector('img[id$="-x-btn"]').id = 'quests-' + new_id_num + '-x-btn'
    clone.querySelector('label[id$="-label"]').id = 'quests-' + new_id_num + '-label'
    clone.querySelector('label[id$="-label"]').innerHTML = 'Quest ' + (new_id_num + 1) + ':'

    insertAfter(questFields[questFields.length - 1], clone)

    resetIndex()
})

resetxBtnEventListener()