Drag and drop conditional not working

Design help Custom code
1

Hello, I did a drag and drop on Webflow with javascript and some jquery. I added a condition to the drop function but the “else” statement doesn’t seem to work. I want the drag and drop to work with elements of a certain class, so the else statement should display a “try again” message when an attempt is made to drop an element without that class. The else statement seems to be ignored though.

Here’s the read-only link: https://preview.webflow.com/preview/farm-animals-montessori?utm_medium=preview_link&utm_source=designer&utm_content=farm-animals-montessori&preview=aeb9c41c917ba035fcdfb2dce8807161&mode=preview

And the custom code is something like this.

$(".farmanimal").attr("draggable", "true").attr("ondragstart", "drag(event)");

$("#farm").attr("ondrop", "drop(event)").attr("ondragover", "allowDrop(event)");

function allowDrop(ev) {

    ev.preventDefault();

}

function drag(ev) {

    ev.dataTransfer.setData("id", ev.target.id);

    ev.dataTransfer.setData("class", ev.target.className);

}

function drop(ev) {

    ev.preventDefault();

    var data = ev.dataTransfer.getData("id");

    var className = ev.dataTransfer.getData("class");

    if (className = "farmanimal") {

        ev.target.appendChild(document.getElementById(data));

        $("#goodjob").fadeIn().delay(300).fadeOut().css("display", "flex");

    } else {

        $("#tryagain").fadeIn().delay(300).fadeOut().css("display", "flex");

    }

}

Thanks in advance!