It's returning null when the createElement are dropped in their container. But the other elements that are in my html files are dragging correctly except for the elements create with the javascript

window.addEventListener("load", ()=>{
    const Element = document.querySelectorAll( "#Data" )
    const Drop = document.querySelectorAll( "#Drop" )
    const AddBug = document.getElementById( "AddBug" )
    let DraggedItem = null

    AddBug.addEventListener("click", ()=>{
        const BugInput = document.getElementById("BugInput").value
        const Wrapper = document.getElementById("Wrapper")
        const NewDiv = document.createElement("span")
        NewDiv.classList.add("Data")
        NewDiv.setAttribute("id", "Data")
        NewDiv.setAttribute("draggable", "true")
        NewDiv.innerText = BugInput
        Wrapper.append(NewDiv)
    })
    
    for( let i=0; i<Element.length; i++ ){
        const Item = Element[i]

        Item.addEventListener("dragstart", () =>{
            console.log("DragStart")
            DraggedItem = Item
            console.log(DraggedItem)
            setTimeout(()=>{ Item.style.display = "none" },0)
        })
        Item.addEventListener("dragend", ()=>{
            console.log("dragend")
            setTimeout(()=>{
                DraggedItem.style.display = "block"
                DraggedItem = null
            },0)
        })

        for ( let j=0; j<Drop.length; j++ ){
            const list = Drop[j]

            list.addEventListener( "dragover", ( e )=>{ e.preventDefault() })
            list.addEventListener( "dragenter", ( e )=>{ e.preventDefault() })
            list.addEventListener( "drop", ()=>{ list.append(DraggedItem) })
        }
    }

})