JSFiddle - React, Tailwind, and code Playground

HTML

<div id="movies">


</div>
<button type="button" onclick="sortBy('name', true)">
Name (ascending)
</button>
<button type="button" onclick="sortBy('name', false)">
Name (descending)
</button>
<button type="button" onclick="sortBy('rating', true)">
Rating (ascending)
</button>
<button type="button" onclick="sortBy('rating', false)">
Rating (descending)
</button>

CSS

.movie {
  border: 1px solid black;
  background: #7799FF;
  padding: 0.1em;
  margin: 0.5em;
}

JavaScript

function hashStr(stringValue) {
  var hash = 0, i, chr;
  if (stringValue.length === 0) return hash;
  for (i = 0; i < stringValue.length; i++) {
    chr   = stringValue.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
}

const MOVIES = [
   {name: "a", rating: 3},
   {name: "b", rating: 6},
   {name: "c", rating: 3},
   {name: "d", rating: 2},
   {name: "e", rating: 1},
];

function showMovies() {
    const moviesDiv = document.querySelector("#movies");
    for(const movie of MOVIES) 
    {
        const id = "movie-"+hashStr(movie.name);
        // movie not created yet
        if(!document.querySelector("#"+id)) {
            const elm = document.createElement("div");
            elm.appendChild(new Text(movie.name + " ("+movie.rating+"/10)"));
            elm.id = id;
            elm.classList.add("movie");
            moviesDiv.appendChild(elm);
        }
    }
}
function sortBy(property, ascending=true) {
    MOVIES.sort((a,b) =>{
        return cmp(a[property], b[property], ascending);    
    });
    const moviesDiv = document.querySelector("#movies");
    let lastMovie = null;
    for(const movie of MOVIES) 
    {
        const id = "#movie-"+hashStr(movie.name);
        const movieDiv = document.querySelector(id);
        console.log(id, movieDiv);
        // If created
        if(movieDiv) {
            // remove and append after last processed movie (for the first movie, this will append to top)
            moviesDiv.insertBefore(movieDiv, lastMovie);
        }
    }
}
// Compare string and number, makes no sense for other types
function cmp(a,b, ascending=true) {
    if(typeof a=='number' && typeof b == "number") {
        return ascending ? a-b : b-a;
    }
    else if(typeof a=='string' && typeof b == "string"){
        return (ascending ? 1 : -1) * a.localeCompare(b);
    }
    else {
        return 0;
   ...