Re-render after drag and drop

If I drag and drop one element, then everything works fine, but if I add more elements, then everything does not work correctly.

I want to re-render all the elements after drag and drop. I don’t care about their order, as long as they are in the right columns.

Please tell me what I’m doing wrong.

codepen

const newTasks = document.querySelector('.trello__body--new')
const inProgress = document.querySelector('.trello__body--in-progress')
const completed = document.querySelector('.trello__body--completed')
const columns = document.querySelectorAll('.trello__body')

let currentDragItemID = null

const tasks = [
    { id: 1, text: 'Learn JS', status: 'new' },
    { id: 2, text: 'Learn React', status: 'new' },
    { id: 3, text: 'Learn TypeScript', status: 'new' },
    { id: 4, text: 'Learn Node.js', status: 'new' },
    { id: 5, text: 'Learn Next.js', status: 'new' },
]

const dragStart = event => {
    currentDragItemID = parseInt(event.target.getAttribute('task-id'))
    event.target.classList.add('trello__item--hide')
}

const dragEnd = event => (event.target.className = 'trello__item')

const columnDragOver = event => event.preventDefault()

const columnDragEnter = event => event.target.classList.add('trello__body--active')

const columnDragLeave = event => event.target.classList.remove('trello__body--active')

const columnDragDrop = event => {
    const status = event.target.getAttribute('status')

    const updatedTasks = tasks.map(task => {
        if (task.id === currentDragItemID) {
            return { ...task, status: status }
        }
        return task
    })

    event.target.classList.remove('trello__body--active')
    render(updatedTasks)
}

function render(array) {
    document.querySelectorAll('.trello__item').forEach(elem => elem.remove())

    array.forEach(item => {
        const task = document.createElement('div')
        task.className = 'trello__item'
        task.innerHTML = item.text
        task.setAttribute('task-id', item.id)
        task.draggable = true

        switch (item.status) {
            case 'new':
                newTasks.append(task)
                break
            case 'in-progress':
                inProgress.append(task)
                break
            case 'completed':
                completed.append(task)
                break
            default:
                break
        }

        task.addEventListener('dragstart', dragStart)
        task.addEventListener('dragend', dragEnd)
    })
}

render(tasks)

columns.forEach(item => {
    item.addEventListener('dragover', columnDragOver)
    item.addEventListener('dragenter', columnDragEnter)
    item.addEventListener('dragleave', columnDragLeave)
    item.addEventListener('drop', columnDragDrop)
})