Cannot add class but elements are already added to the DOM

Hey I am trying to add an active class to searchResult HTML using JavaScript.

I try to search for recipe in search bar and results are displayed as it is shown in image.

When I click on a recipe from the search list I want to add a background color to the currently selected recipe (click on the recipe) using function resultHighlight()

function resultHighlight() is being called in the controller and produces an error . Since the HTML is already added(after a search query is fired) by function renderRecipe() then why it is unable to find href id and producing error ?

//Function to add background color 

export const resultHighlight = id => {

NOTE: I tried console logging follwoing part and it returns null.


//OUTPUT: null

JavaScript has already added HTML by a function (Search result)

//Function to add search result on UI

const renderRecipe = recipe => {
      const markup = `
        <a class="results__link results__link--active"  href="#${recipe.recipe_id}">
          <figure class="results__fig">
          <img src="${recipe.image_url}" alt="${recipe.title}">
            <div class="results__data">
             <h4 class="results__name">${reduceRecipeTitle(recipe.title)}</h4>
                 <p class="results__author">${recipe.publisher}</p>

      elements.searchResList.insertAdjacentHTML("beforeend", markup);

Do you have the full project on something like Codepen or That way we can test things out and give you some advice.


.Thanks for responding I tried uploading files on CodePen but it limits it. I have uploaded my files on GitHub and I have commented it as ERROR .So the commented part of code gives error rest is working fine.

Look for 1. src->js->index.js (**look for function call resultHighlight**)
2. src->js->view->searchView.js (**look for function definition resultHighlight**)

I am using npm to run local server
I was following this video: