EventHandler is not working.It gives No output when I click the button

var urlId = 'https://www.themealdb.com/api/json/v1/1/lookup.php?i='; //search by id
const mealList = document.getElementById('list-Items-container');
var input = document.getElementById('inputText');
const mealListFavorites = document.getElementById(
  'list-Items-container-favorites'
);

window.onload = renderFavorites;

document.querySelector('form').addEventListener('submit', handleSubmitForm);

// .getElementById('get-details')
mealList.addEventListener('click', handleGetDetailsOrAddToFavorites);
mealListFavorites.addEventListener('click', handleRemoveFavorites);

function handleRemoveFavorites(e) {
  e.preventDefault();
  console.log(e.target.value);
}

function handleGetDetailsOrAddToFavorites(e) {
  e.preventDefault();
  console.log('clicked');
  if (e.target.value == 'details') {
    let mealItem = e.target.parentElement.parentElement;

    fetch(
      `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
    )
      .then(function (res) {
        return res.json();
      })
      .then((data) => {
        mealRecipeModal(data.meals);
      });
  } else if (e.target.value == 'favour') {
    let mealItem = e.target.parentElement.parentElement;

    fetch(
      `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
    )
      .then(function (res) {
        return res.json();
      })
      .then((data) => {
        window.localStorage.setItem(
          mealItem.dataset.id,
          JSON.stringify(data.meals)
        );
      });
  }

  console.log(Object.entries(localStorage));
}

function mealRecipeModal(meal) {
  console.log(meal[0]);
  const destination = meal[0].strSource;
  console.log(destination);
  window.open(`${meal[0].strSource}`);
}

function handleSubmitForm(e) {
  e.preventDefault();

  let input = document.querySelector('input');

  findFood(url + input.value);
  input.value = '';
}

function findFood(address) {
  fetch(address)
    .then(function (res) {
      //console.log(res);
      return res.json();
    })
    .then((data) => {
      console.log(data);

      let html = '';
      if (data.meals) {
        data.meals.forEach((meal) => {
          html += `<div class="food-card" data-id="${meal.idMeal}">
          <div class="food-card-image">
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
              </div>
              <div class="food-card-info">
                  <h3>${meal.strMeal}</h3>
                  </div>
                  <div class="food-card-features">
                  <button id="favorites" value="favour">Add</button>
                  <button id="get-details" value="details" >Details</button>
                  </div>
              </div>`;
        });
      }
      console.log(html);
      mealList.innerHTML = html;
    });
}
var html1 = '';
function findFoodFavorite(address) {
  fetch(address)
    .then(function (res) {
      //console.log(res);
      return res.json();
    })
    .then((data) => {
      console.log(data);

      if (data.meals) {
        data.meals.forEach((meal) => {
          html1 += `<div class="food-card" data-id="${meal.idMeal}">
          <div class="food-card-image">
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
              </div>
              <div class="food-card-info">
                  <h3>${meal.strMeal}</h3>
                  </div>
                  <div class="food-card-features">
                  <button id="favorites" value="defavour" >Remove</button>
                  <button id="get-details" value="details" >Details</button>
                  </div>
              </div>`;
        });
      }
      console.log(html1);
      mealListFavorites.innerHTML = html1;
    });
}
function renderFavorites() {
  const urlArray = [];
  console.log(Object.entries(localStorage));
  for (var i = 0; i < localStorage.length; i++) {
    console.log(Object.entries(localStorage)[i][0]);
    urlArray.push(Object.entries(localStorage)[i][0]);
  }
  console.log(urlArray);
  urlArray.forEach((id) => findFoodFavorite(urlId + id));
}

I am using API for my website.My handleGetDetailsOrAddToFavorites event handler is working but handleRemoveFavorites EventHandler which has been implemented the same way is not working.But why???It gives no Error.Also console.log(e.target.value) in handleRemoveFavorites console logs Nothing.I want my handleRemoveFavorites to give out (e.target.value) so that i can fetch indivisual items Id and delete them from localstorage.
Please Help.