If I have multiple divs on my screen, and on click they all move to the right of the webpage. How can I determine which reached first?

Question

I have a parent class of animal and multiple subclasses like, leopard, caracal and cheetah. They are placed on the web page once their respective buttons are clicked and when my button start is clicked, they all move at random times (milliseconds) to the right of the webpage. How would I determine which one was the first to arrive at the right of the page?

This is how I get the full width of the web page:

var trackWidth = $(window).width();

The function bellow is invoked one the start button on the html page is clicked, every child class or animal in this case has this function

Leopard.prototype.getReady = function() {
var raceTime = Math.floor((Math.random() * 5000) + 1)
this.$node.animate({
    left: trackWidth,//This move the animal the width of the webpage(In this case, the track)
}, raceTime)
}

This is an array that stores each instance of an Animal:

var arr = window.animals = [];

This function iterates through the array and calls the getReady of each child class

 var start_btn = document.querySelector(".startRace");
    $(start_btn).click(function() {
        arr.forEach(function(animal) {
            animal.getReady()
        })
    })

So yes, my question is if four animals were racing across the width of the webpage, how would I be able to print which one was first or has one the race?

(Please inform me if the question needs to be updated or redone)