I have an array of images:

const characterImages = ["images/jerry-senfeld.png", "images/george-costanza.png", "images/elaine-benes.png", "images/cosmo-kramer.png"]

I have another function which pulls some data from a basic API and updates a simple HTML page. An if statement looks at the innerHTML to determine which character is there and based on that, set the src attribute of an image. Everything is working as expected, however the image shown is always 1 index spot behind the quote. So for instance if they innerHTML of <h2> says "George" I can expect the jerry-seinfeld.png image to show. I have been going around in circles on this, any help would be appreciated. Code below.Thank you!

//Define our variables
const headerTag = document.querySelector("h2");
const quoteTag = document.querySelector(".quote");
let characterImage = document.querySelector(".characterImage");

const characterImages = [
  "images/jerry-senfeld.png",
  "images/george-costanza.png",
  "images/elaine-benes.png",
  "images/cosmo-kramer.png",
];
var x;
const getQuote = () => {
  fetch("https://seinfeld-quotes.herokuapp.com/quotes")
    .then((response) => response.json())
    .then((jsonData) => {
      quoteTag.innerHTML = jsonData.quotes[x].quote;
      headerTag.innerHTML = jsonData.quotes[x].author;
    });
};

// images function to go below:
const getImage = () => {
  if (headerTag.innerHTML == "Jerry") {
    characterImage.setAttribute("src", characterImages[0]);
  } else if (headerTag.innerHTML == "George") {
    characterImage.setAttribute("src", characterImages[1]);
  } else if (headerTag.innerHTML == "Elaine") {
    characterImage.setAttribute("src", characterImages[2]);
  } else if (headerTag.innerHTML == "Kramer") {
    characterImage.setAttribute("src", characterImages[3]);
  } else {
    characterImage.setAttribute("src", "images/placeholder-image.png");
  }
};

document.querySelector("button").addEventListener("click", function (event) {
  x = Math.floor(Math.random() * 422);
  getQuote();
  getImage();
});

HTML (relevant parts):

<div class="main-quote">
  <h2></h2>
  <img src="images/placeholder-image.png" class="characterImage" alt="character image">
  <p class="quote"></p>
  <button class="button2">Click!</button>
</div>