JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="movielist">
</ul>

JavaScript

/*
    Implement the MovieList class:
    
    1) When addMovies() is called, add the given list of movies to the container element (#elMovieList)
    
    2) When a movie title is clicked:
        a) Move it to the top of the list
        b) Print the total number of clicks to the console1
*/
var classicMovies = [
    'Dr. Strangelove',
    'King Kong',
    'Casablanca'
];
var scifiMovies = [
    '2001: A Space Odyssey',
    'Star Wars',
    'Flash Gordon' 
];
 

function MovieList(movieListElement){
    this.movieList = movieListElement;
    this.movieList.setAttribute('data-clicks', "0");    
}

var elMovieList = document.getElementById('movielist');
var movieList = new MovieList (elMovieList);


MovieList.prototype.moveToTheTop = function() {
    var movieListElement = this.parentElement;
    var clicks = parseInt(movieListElement.getAttribute('data-clicks'), 10);
    var newClickCount = clicks + 1;
    movieListElement.setAttribute('data-clicks', newClickCount);
    console.log("clickCount:" + newClickCount);
    
    var firstMovie = movieListElement.firstElementChild;
    
    movieListElement.insertBefore(this, firstMovie);
    
}

MovieList.prototype.addMovies = function(moviesToAdd) {    
    var that = this;

    //console.log(that.movieList.outerHTML);
    moviesToAdd.forEach(function(m){        
        var aMovie = document.createElement('li');
        aMovie.appendChild(document.createTextNode(m));
        //console.log('adding click eventlistener');
        aMovie.addEventListener('click', that.moveToTheTop);
        that.movieList.appendChild(aMovie);               
    });
    


}

movieList.addMovies(classicMovies);
movieList.addMovies(scifiMovies);
 
// your code here