How do I make my favorites button show a heart emoji above my recipeTitle with LocalStorage when it is clicked?

// Global variables
let containerForInfoParent = document.querySelectorAll('.container');
let recipeButton = document.getElementsByClassName('show-recipe-button');
let infoWrapper = document.querySelector('#info-wrapper');

// init
window.addEventListener("load", init);

function init() {
    getRecipes();
    for (let i = 0; i < recipeButton.length; i++) {
        recipeButton[i].addEventListener('click', getDetails(`${i}`));
        console.log(recipeButton);
    }
}

function getDetails(e) {
    let id = e.target.id.slice(12);
    console.log(id)
    fetch (`http://localhost/magazine/webservice?id=${id}`)
        .then(response => response.json()

        )

        .then(data => {
            let recipeDetails = document.querySelector('#recipe-details');
            recipeDetails.innerText = data.recipe;
            console.log(recipeDetails);

            let recipeTags = document.querySelector('#recipe-tags');
            recipeTags.innerText = data.tags.toString();
            console.log(recipeTags);



            // test in console console.log(recipeDetails);
        });
}

/**
 * Get recipes: Returns a collection of objects in JSON-format
 */
function getRecipes() {
    fetch ("http://localhost/magazine/webservice")
        .then(response => response.json()

        )

        .then(data => {
            for (let recipe of data) {
                let recipeObjects = recipe;
                createRecipe(recipe.id, recipe.name, recipe.kitchen, recipe.image);
            }
        });
}

function createRecipe(id, name, kitchen, image) {
    let rowDiv = document.createElement('div');
    // rowDiv.classList.add('row');

    let recipeDiv = document.createElement('div'); // <div> in memory
    recipeDiv.classList.add('col-sm');
    recipeDiv.classList.add('card');

    let recipeTitle = document.createElement('h1');
    recipeTitle.innerText = name;
    recipeDiv.appendChild(recipeTitle);

    let recipeImage = document.createElement('img');
    recipeImage.src = `./images/${image}.jpg`;
    recipeImage.classList.add('recipe-image');
    recipeDiv.appendChild(recipeImage);

    // Voeg toe als favoriet knop
    let recipeButtonOne = document.createElement('button');
    recipeButtonOne.classList.add('btn');
    recipeButtonOne.classList.add('btn-warning');
    recipeButtonOne.innerText = 'Add to favorites';
    recipeButtonOne.setAttribute('id', `add-to-favorites-${id}`);
    recipeDiv.appendChild(recipeButtonOne);

    let recipeButtonTwo = document.createElement('button');
    recipeButtonTwo.addEventListener('click', getDetails); // Event listener
    recipeButtonTwo.classList.add('btn');
    recipeButtonTwo.classList.add('btn-warning');
    recipeButtonTwo.innerText = 'Show recipe';
    recipeButtonTwo.setAttribute('id', `show-recipe-${id}`);
    recipeDiv.appendChild(recipeButtonTwo);

    rowDiv.appendChild(recipeDiv);
    console.log(rowDiv);

    let recipeWrapper = document.querySelector('.recipe-wrapper');
    recipeWrapper.appendChild(rowDiv);
}