Event conflict when clicking an element

Question

Greetings,

I’m having a problem clicking a button to bookmark an element:

When I click on the card it is to open a modal with the recipe info, and when I click on the heart icon it is to bookmark, both methods work, however, there is a conflict when I click on the heart icon, it performs the favorite function, but also performs the modal, That is, the two methods are activated because when I click the icon, I also click the card because it is inside the icon. How do I fix it? Thank you.

  const meal = document.createElement('div')
  meal.classList.add('meal')

  meal.innerHTML = `
    <div class="meal-header">
      ${random ? `<span class="random">Random Recipe</span>` : ''}
      <img src="${mealData.strMealThumb}" alt="${mealData.strMeal}">
    </div>
    <div class="meal-body">
      <h4>${mealData.strMeal}</h4>
      <button class="fav-btn">
        <i class='bx bxs-heart'></i>
      </button>
    </div>
  `
  const btn = meal.querySelector('.meal-body .fav-btn')

  btn.addEventListener('click', () => {
    if(btn.classList.contains('active')){
      removeMealLS(mealData.idMeal)
      btn.classList.remove('active')
    }else{
      addMealLS(mealData.idMeal)
      btn.classList.add('active')
    }

    fetchFavMeals()
  })

  meal.addEventListener('click', () => {
    if (!meal.classList.contains('fav-btn')) {
      showMealInfo(mealData)
    }
  })