var movies = ['Battlefield Earth', 'La La Land'];

// create jQuery objects for elements we care about
var $moviesContainer = $('#movies-container');
var $addMovieButton = $('#add-movie-button');
var $newMovieInput = $('#new-movie-input');

// map each existing movie to a jQuery object
var $movies = movies.map(function (movie) {
  var $movieItem = $('<li>' + movie + '</li>');
  
  // and explicitly add event handlers to each item
  $movieItem.on('mouseenter', function () {
    $movieItem.css('background-color', 'red');
  });
                        
  $movieItem.on('mouseleave', function () {
    $movieItem.css('background-color', '');
  }); 
  
  return $movieItem;
});

// then add to them to the container 
// (yes - you can append a list of jQuery objects like this!)
$moviesContainer.append($movies);

// set up click handler for adding a new movie
$addMovieButton.on('click', function () {
  // grab the input value, trim
  var newMovie = $newMovieInput.val().trim();
  
  // if non-empty, add to the moviesContainer
  if (newMovie) {
    $moviesContainer.append('<li>' + newMovie + '</li>');
  }
});

// note how our event handlers were only registered on the original list items
// new items therefore don't have this property as we haven't explicitly set it