Estoy tratando de agregar elementos a un <div> en el orden de una métrica de puntuación. La idea es tener los sitios con la puntuación más alta en la parte superior. Los datos que estoy tratando de mostrar están en el orden correcto porque mi consulta SQL fuerza un orden. El orden correcto se confirma cuando hago un volcado de datos de la consulta en la consola de desarrollo:

Como era de esperar, el sitio con una puntuación de 10,39 está en la parte superior y el más bajo está en la parte inferior. Luego voy a agregar a mi contenedor div, pero obtengo un resultado extraño con .append() :

El sitio de mayor clasificación siempre se coloca en la parte inferior, pero los otros sitios restantes (sin importar cuántos solicite) siempre se clasifican y ordenan correctamente. Mi código para agregar es el siguiente:

 $.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); });

Si alguien tiene una idea de por qué append funciona de esta manera, o qué podría estar mal con mi código, hágamelo saber. Luego trato de usar prepend() , y sucede algo aún más extraño: el primer sitio se repite varias veces, lo que no puedo entender.

Estoy revisando cada elemento solo una vez y no puedo entender por qué ocurre este comportamiento. Cualquier ayuda sería muy apreciada. Gracias