refactoring a JSON response

processMovieDetailsResponse.js

function processMovieDetailsResponse(movie) {
  const movieDetailTemplate = `
    <div class="movie-detail" data-movie-id="${movie.id}">
      <p><strong>${movie.original_title}</strong></p>
      <img src="https://image.tmdb.org/t/p/w185${movie.poster_path}" />
      <p>
        <em>Genres:</em>
        <ul>
          ${displayGenres(movie.id, movie.genres)}
        </ul>
      </p>
      <p>
        <em>Year</em>: ${movie.release_date.substring(0, 4)}
      </p>
      <p>
        <em>Rating:</em> ${movie.vote_average}
      </p>
      <p>
        <button class="btn-close">Close</button> 
        <button class="btn-favorite" data-movie-title="${movie.title}" data-movie-id="${movie.id}">Add to favorites</button>
      </p>
    </div>
  `;

  if (document.getElementsByClassName('movie-detail').length > 0) {
    document.getElementsByClassName('movie-detail')[0].remove();
  }

  const el = document.createElement('template');
  el.innerHTML = movieDetailTemplate;
  document.body.appendChild(el.content.firstElementChild);
  $('.movie-detail').animate({
    opacity: 1
  }, 300);
}