How can you make JS-functions for dragandrop work on JS-created-elements?

Question

I want to make a drag-and-drop application were the drpzone-fields are variable (JS -> foreach). The code workes on the manually created elements (HTML-code).

But when I tried to create a dropzone element in JS it does not work.

I do not know why it does not work.

<div class="dropzone">
    <img id="draggable" src="https://cdn.pixabay.com/photo/2020/12/02/01/06/chipmunk-5795916__340.jpg" draggable="true" width="100" height="35">
</div>
<br/><br/><br/>
<div id="timetable">
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
</div>
<style>
    body {
        user-select: none;
    }

    #draggable {
        text-align: center;
        background: white;
    }

    .dropzone {
        width: 100px;
        height: 40px;
        background: lightblue;
        margin: 10px;
        padding: 10px;
    }
</style>

<script type='text/javascript'>
    let dragged = null;

    const source = document.getElementById("draggable");
    source.addEventListener("dragstart", (event) => {
        dragged = event.target;
    });

    const target = document.querySelectorAll(".dropzone");
    target.forEach(function (item) {
        item.addEventListener("dragover", (event) => {
            event.preventDefault();
        });

        item.addEventListener("drop", (event) => {
            event.preventDefault();
            if (event.target.className === "dropzone") {
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }
        });
    });
    window.onload = () =>{
        createTimetable();
    }

    const createTimetable = () => {

        const ele = document.createElement("div");
        ele.className ="dropzone";
        document.getElementById("timetable").append(ele);

    }

</script>