جعل الكود يعمل على جميع أيقونات LIKE جافاسكربت؟

لدي كود js يعمل ، لكن المشكلة هي أنه عندما أستخدمه في صفحة HTML الرئيسية ، فإنه لسبب ما يعمل فقط على الصورة الأولى ، على الرغم من أن أيقونة LIKE موجودة في جميع الصور. لا أفهم سبب عمله فقط على الأيقونة الأولى ولا يعمل على الأيقونات الأخرى

const likeIcon = document.getElementById('like-icon');
const likeCount = document.getElementById('like-count');


likeIcon.onclick = () => {
    const newId = likeIcon.getAttribute('data-news');
    const url = `/like_news/${parseInt(newId)}/`;
    fetch(url, {
        method: 'GET',
        headers: {
            'Content-type': 'applicatin/json'
        }
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        if(data.liked) {
            likeIcon.classList.remove('empty-heart');
        }
        else {
            likeIcon.classList.add('empty-heart');
        }
        likeCount.innerHTML = data.like_count;
    })
    .catch(error => {
        console.log(error);
    })
}

كود HTML

<section class="trend">
    <div class="container">
      <div class="flex align-center justify-between trend-header">
        <h2 class="subtitle">
          <i class="ri-fire-line subtitle-icon"></i>
          В тренде
        </h2>
        <button class="btn btn-outline">Посмотреть все</button>
      </div>

      <div class="trend-content">
        {% for new in news|slice:"2" %}
        <div class="trend-card">
          <img src="{{new.banner.url}}" alt="newsPhoto" class="trend-background" />
          <div class="card-header">{{new.category.title}}</div>
          <div class="card-bottom">
            <h3 class="card-title">
              {{new.title}}
            </h3>
            <div class="card-btn">
              <div class="count" id="like-count">{{new.likes.count}}</div>
              {% if liked_by %}
              <button class="btn-up" class="fa fa-heart">
                <li><a href="javascript:void(0);"><i id="like-icon" data-news="{{new.id}}" class="fa fa-heart"></i></a></li>
              </button>
              {% else %}
              <button class="btn-up" class="fa fa-heart empty-heart">
              <li><a href="javascript:void(0);"><i id="like-icon" data-news="{{new.id}}" class="fa fa-heart empty-heart"></i></a></li>
            </button>
            </div>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>

حاولت استخدام querySelectorAll ولكن لم ينجح أيضا

const likeIcon = document.querySelectorAll('#like-icon');
const likeCount = document.getElementById('like-count');
likeIcon.forEach(like-icon => {
    like-icon.addEventListener("click", () => { 
      const newId = likeIcon.getAttribute('data-news');
    const url = `/like_news/${parseInt(newId)}/`;
    fetch(url, {
        method: 'GET',
        headers: {
            'Content-type': 'applicatin/json'
        }
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        if(data.liked) {
            likeIcon.classList.remove('empty-heart');
        }
        else {
            likeIcon.classList.add('empty-heart');
        }
        likeCount.innerHTML = data.like_count;
    })
    .catch(error => {
        console.log(error);
    })
          });
      }
}

كيف أجعلها تعمل على جميع أيقونات LIKE؟