JS : drag and drop img to img

I'm trying to make a recycling game.
Basically what i want is the waste image to the bin then the waste image disappears.
But i can't even drop at the moment
Have i done something wrong? Any suggestion please

<div class="wastes">
    <img class="waste recyclable" draggable='true' ondragstart='onDragStart(event);' src="imgs/can.png" alt="">
    <img class="waste general" draggable='true' ondragstart='onDragStart(event);'' src="imgs/bag.png" alt="">
</div>
<div class="bins">
    <img class="bin recyclable" ondragover='onDragOver(event);' ondrop='onDrop(event);' src="imgs/gbin.png" alt="">
    <img class="bin general" ondragover='onDragOver(event);' ondrop='onDrop(event);' src="imgs/bin.png" alt="">
</div>

js

function onDragOver(event){
    event.preventDefault();
}

function onDragStart(event){
    event.dataTransfer.setData('text/plain', event.target.id);
}

function onDrop(event){
    event.preventDefault();
    const id = event.dataTransfer.getData('text');
    const draggableElement = document.getElementById(id);
    const bin = event.target;

    // bin.appendChild(draggableElement);
    event.dataTransfer.clearData;
    ev.target.appendChild(document.getElementById(data));
}