Chaining animations when one is completed jquery

Question

i am trying to get familiar with jquery by doing some animations. The goal of the code that I will show is to rotate an image on mouse hover then make 3 other images spawn and fall in a straight line one after another. Thing is that after the first image rotates nothing else happens. The expected behavior would be that the images spawn one after another and perform their animations. Also this should happen every time the mouse enters and it doesn't.

// Fixing the Z position of the net (relative to the other elements)
let basket = $("#basketfront");

$("#net").css({
  "z-index": 15,
});

basket.css({
  "z-index": 14,
});

$("#butterfly").css({
  "z-index": 14,
});

$(".apple").css({
  "z-index": 13,
});

//Spawning apples (within margins on the crown of the tree)
let tree = $("#tree");
let treePos = tree.position();
let treeWidth = tree.width();
let treeHeight = tree.height();

$("#apple1").css({
  left:
    treePos.left +
    Math.floor(Math.random() * (treeWidth * 0.8)) +
    treeWidth * 0.1,
  top:
    treePos.top +
    Math.floor(Math.random() * (treeHeight * 0.3)) +
    treeHeight * 0.1,
});
$("#apple2").css({
  left:
    treePos.left +
    Math.floor(Math.random() * (treeWidth * 0.8)) +
    treeWidth * 0.1,
  top:
    treePos.top +
    Math.floor(Math.random() * (treeHeight * 0.3)) +
    treeHeight * 0.1,
});
$("#apple3").css({
  left:
    treePos.left +
    Math.floor(Math.random() * (treeWidth * 0.8)) +
    treeWidth * 0.1,
  top:
    treePos.top +
    Math.floor(Math.random() * (treeHeight * 0.3)) +
    treeHeight * 0.1,
});

// Moving net on cursor
$(window).mousemove(function (event) {
  $("#net").css({
    left: event.pageX,
    top: event.pageY,
  });
});

//Moving apples to basket on hover
let basketPos = basket.position();
let basketWidth = basket.width();
let basketHeight = basket.height();


for (let i = 1; i <= 3; i++) {
  $("#apple" + i).hover(function () {
    $(this).animate({
      top: basketPos.top + basketHeight * 0.03,
      left: basketPos.left + basketWidth * (0.2 * i),
    });
  });
}

// Tilting the watercan on hover
let wateringcan = $("#wateringcan");
let watering_can_to_normal = false;

window = $(window);


$('#waterdrop1').css({
    "display": "none"
});
$('#waterdrop2').css({
    "display": "none"
});
$('#waterdrop3').css({
    "display": "none"
});
wateringcan.mouseenter(function () {
  $("#wateringcan").animate(
    { deg: -30 },
    {
      duration: 1200,
      step: function (now) {
        $(this).css({ transform: "rotate(" + now + "deg)" });
      },
    }, function () {
        console.log("animate waterdrop 1")
        $('#waterdrop1').css({
            "display": "inline",
            top: wateringcan.position().top * 0.85,
            left: wateringcan.position().left
                    + Math.floor(Math.random() * (wateringcan.with * 0.1))
                    
        });
        $('#waterdrop1').animate({
            top: window.height + $('waterdrop1').height + 10,
        },function() {
            console.log("animate waterdrop 2")
            $('#waterdrop1').css({
                "display": "none"
            });
            $('#waterdrop2').css({
                "display": "inline",
                top: wateringcan.position().top * 0.85,
                left: wateringcan.position().left
                        + Math.floor(Math.random() * (wateringcan.with * 0.1))
            });
            $('#waterdrop2').animate({
                top: window.height + $('waterdrop1').height + 10,
            },function() {
                console.log("animate waterdrop 3")
                $('#waterdrop2').css({
                    "display": "none"
                });
                $('#waterdrop3').css({
                    "display": "inline",
                    top: wateringcan.position().top * 0.85,
                    left: wateringcan.position().left
                            + Math.floor(Math.random() * (wateringcan.with * 0.1))
                });
                $('#waterdrop3').animate({
                    top: window.height + $('waterdrop1').height + 10,
                },function() {
                    $('#waterdrop3').css({
                        "display": "none"
                    });
                    $("#wateringcan").animate(
                        { deg: -30 },
                        {
                          duration: 1200,
                          step: function (now) {
                            $(this).css({ transform: "rotate(" + now + "deg)" });
                          },
                        }, function(){
                            $("#wateringcan").stop()
                        })
                  })
              })

          })
    }
  );
});


// Moving the butterfly across the screen
function animateButterfly() {
  $("#butterfly").animate(
    {
      top: Math.floor(
        Math.random() * ($(window).height() - $("#butterfly").height())
      ),
      left: Math.floor(
        Math.random() * ($(window).width() - $("#butterfly").width())
      ),
    },
    3000,
    function () {
      animateButterfly();
    }
  );
}

animateButterfly();

//Hovering the butterfly, making it move to a random position
$("#butterfly").hover(function () {
  $("#butterfly").stop();
  $("#butterfly").animate(
    {
      top: Math.floor(
        Math.random() * ($(window).height() - $("#butterfly").height())
      ),
      left: Math.floor(
        Math.random() * ($(window).width() - $("#butterfly").width())
      ),
    },
    1000,
    function () {
      animateButterfly();
    }
  );
});

Any solutions?