Having a problem with omdb movie poster showing on overlay in Project 10 web api?

//You can see that I have commented out a couple of code snippets in my attempt to get //this to work. Probably something easy but I am not seeing it. Thanks for any help!

$(document).ready(function() { var $overlay = $('<div id="overlay"></div>'); var $overlayImage = $("<li>");
var $captionTitle = $('<h3></h3>'); var $captionYear = $('<h4></h4>'); var $caption = $('<span></span>');

 //add image to the overlay
  $overlay.append($overlayImage);

  //add caption to overlay
  $overlay.append($caption);

 //add title to overlay
  $overlay.append($captionTitle);

 //add year to overlay
  $overlay.append($captionYear);


  //add overlay
  $("body").append($overlay);

 const $searchField = $('#search');
 const $submitButton = $('#submit');

function apiCall() { $searchField.prop("disabled", true); $submitButton.attr("disabled", true).val("searching...");

 var randomMovie = $searchField.val(); 

$.getJSON("https://www.omdbapi.com/?t=" + encodeURI(randomMovie)).then(function(response) {

 var image = response.Poster;
 var title = response.Title;
 var year = response.Year;
 var rated = response.Rated;
const plot = response.Plot;

 var mainDiv = document.getElementsByClassName(".main");


 var posterHTML = '<li class="poster-list">';
  posterHTML += '<a href=' + image + ' class="image">';
  posterHTML += '<img src=' + image + 'alt=' + title +  '></a>';
  posterHTML += '<h3>' + title + '</h3>';
  posterHTML += '<h4>' + year + '</h4>';
  posterHTML +=  '<span>' + plot + '</span>';

  posterHTML += '</li>'; 

$("#posters").append(posterHTML);

 $searchField.prop("disabled", false);
 $submitButton.attr("disabled", false).val("search"); 

}); // end $.getJSON } //end apiCall()

$('#submit').click(function(){ apiCall(); $searchField.val("");

}); //end submit click function

//click on image $('#posters').click(function(event) { event.preventDefault(); var imageLocation = $('a').attr("href"); $overlayImage.attr("src", imageLocation); $overlay.show(); }); $overlay.click(function() { $overlay.hide(); });

}); //end ready

/*

//click on image $('#posters').click(function(event) { event.preventDefault(); var imageLocation = $('a').attr("href"); $overlayImage.attr("src", imageLocation); $overlay.show();

var captionText = $overlayImage.siblings('span'); $caption.text(captionText); }); $overlay.click(function() { $overlay.hide(); });

*/

/* //click on image $('#posters').click(function(event) { event.preventDefault(); var imageLocation = $('a').attr("href"); $overlayImage.attr("src", imageLocation); $overlay.show();

$overlayImage = $overlay.append( $('img') ); $captionTitle = $overlay.append( $('h3') ); $captionYear = $overlay.append( $('h4') ); $caption = $overlay.append( $( "span" ) );

});

*/