creating code not working when i am creating i button dynamically

Question

This code working perfectly but when i am generating
<i class="fa-regular fa-heart z-item__favorite-button" data-add-to-favorite="22"></i> dynamically it won't work also i am very thankful to you tried many thing but not able to find what exactly the issue. trying for more than 4 day still not understand please someone guide me how to make it work with the dynamic created list also thank in advance

const favoriteButtonAttr = 'data-add-to-favorite';
const isFavorite = 'data-is-favorite';
const listSelector = '[data-my-favorites]';

class FavoritesList {
  constructor () {
    this.storageName = 'favoritesList';
    this.list = this.initList();
  }
  
  initList () {
    if (window.localStorage.getItem(this.storageName)) { 
      
      const list = JSON.parse(window.localStorage.getItem(this.storageName));
      updateHtmlList(list);
      return list;
    } else {   
      return [];
    }
  }
  
  initButton(button) {
    const id = parseInt(button.getAttribute(favoriteButtonAttr));
    
    button.addEventListener('click', (event) => {
      const button = event.target;
      !inArray(id, this.list) ? this.list.push(id) : removeFromArray(id, this.list);
      setState(id, this.list);
      this.updateList();
    })
    
    function setState (id, list) {
      return button.toggleAttribute(isFavorite, inArray(id, list));
    }
    
    setState(id, this.list);
    return button;
  }
  
  updateList() {
    setLocalStorage(this.storageName, this.list);
    updateHtmlList(this.list); 
  }
}

function updateHtmlList(list) {
  if(list.length > 0) {
    
    const newList = list.slice(0).reverse();
    favoritesHTMLElement.innerHTML = '';
    listItems = document.createElement('ul');
    newList.forEach( item => {
      let htmlLi = document.createElement('li');
      htmlLi.innerHTML = item;
      favoritesHTMLElement.appendChild(htmlLi);
    });
  } else {
    favoritesHTMLElement.innerHTML = '';
  }
} 

function inArray(element, array) {
  return array.indexOf(element) != -1;
}

function removeFromArray(element, array) {
  array.splice(array.indexOf(element), 1); 
}

function setLocalStorage(key, value) {
  console.log(value)
  window.localStorage.setItem(key, JSON.stringify(value));
}

const buttons = document.querySelectorAll(`[${favoriteButtonAttr}]`);
const favoritesHTMLElement = document.querySelector(listSelector);
let favorites = new FavoritesList();  
buttons.forEach( button => favorites.initButton(button) );

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<ul>
      <li id="22">
       
      <i class="fa-regular fa-heart z-item__favorite-button" data-add-to-favorite="22"></i>
      </li>
      
      <li id="23">
       
   
         <i class="fa-regular fa-heart z-item__favorite-button" data-add-to-favorite="23"></i>
        
      </li>
      <li id="24">
       
       <i class="fa-regular fa-heart z-item__favorite-button"  data-add-to-favorite="24"></i>
      </li>
      <li id="25">
       
      <i class="fa-regular fa-heart z-item__favorite-button" data-add-to-favorite="25"></i>
      </li>
    </ul>
  

  <section class="favorites">
    <h2>Fav List</h2>
    <ul class="favorites__list" data-my-favorites data-my-favorites-empty="No favorites yet"></ul>
  </section>