Why is the fetch url not updating on button click

I’m working on a JavaScript only project and can’t seem to get my fetch api url to update when I click the happy button. I’ve included my JavaScript below. Any ideas?

I don’t know why but stack overflow wants me to write more non code so i’m just blabbing about that to include more text :/

let apiUrl = 'https://api.quotable.io/random?tags='
let happyUrl = 'happiness'
let endPoint = '';
let choiceUrl = `${apiUrl}${endPoint}`;
console.log(choiceUrl)

async function quoteOptions() {

  let quoteTypes = document.createElement('div');

  quoteTypes.innerHTML =
    `<div class='container2'>
    <p>Welcome! How are you feeling today?</p>
        <button id="happyBtn">Happy</button>
        <button id="motivationalBtn">Motivational</button>
        <button id="lovedBtn">Loved</button>
        <button id="humorousBtn">Silly</button>
      </div>`

  let content = document.querySelector('.container');
  content.appendChild(quoteTypes)

}
quoteOptions();

async function fetchQuoteOption() {

  try {

    const response = await fetch(`${apiUrl}${endPoint}`);
    const data = await response.json();
    console.log(data);
    return data;

    console.log(`Why is ${endPoint} not updating?`);

  } catch (error) {
    console.error('Error:', error);
  }

}

document.getElementById("happyBtn").addEventListener("click", myFunction);

function myFunction() {
  let endPoint = 'happiness';

  fetchQuoteOption();
}