I am trying to add elements to a <div> in the order of a score metric. Idea is to have the highest-scored sites on the top. The data that I am trying to display is in the proper order, because my SQL query forces an order. The proper order is confirmed when I do a data dump from the query into the dev console:

As expected, the site with score 10.39 is at the top, and the lowest is at the bottom. I then go append to my container div, but I get a weird result with .append():

The top ranking site is always placed on the bottom, but the other remaining sites (no matter how many I request) are always ranked and ordered properly. My code to append is as follows:

$.each(data["fetched-sites"], function(index, element){
        console.log(`Total site score: ${element["total_site_score"]}`);
        var cloned = cloneTemplate(index, element);
        console.log(`Processing site ${index}...`);
        $("#fetch-n-sites-output").append(cloned);
    });

If anyone has insight to why append is functioning like this, or what might be wrong with my code, please let me know. I then try to use prepend(), and something even more bizarre happens - the first site is repeated several times, which I cannot wrap my head around.

I am going through each element only once, and I cannot figure out why this behavior is occurring. Any help would be greatly appreciated. Thank you