I'm trying to get the announcement index announcement[0] for each announcement in the code below but I keep getting the same index at [0] when i console.log which is 17 even if I click on a different announcement rendered from the loop. How do I capture every announcement ID [17,18,19....] separately in JavaScript?

<t t-foreach="widget.announcements" t-as="announcement">
        <div class="col-sm-12 col-lg-12 hr_announcement" style="padding:0;">
            <div class="text-color">
                <div class="">
                    <div class="media">
                        <div class="media-body">
                            <h2 id="announcementID" class="text-color display-6" style="font-size: 11px; visibility: hidden;"><t t-esc="announcement[0]"/> </h2>
                            <h2 class="text-color display-6" style="font-size: 11px;"><t t-esc="announcement[1]"/> </h2>
                            <p><a href="#" style="font-size: 15px; color: #5ebade;"><b><t t-esc="announcement[2]"/></b></a></p>
                            <h2 class="text-color display-6" style="font-size: 11px;"><b>Start Date:</b> <t t-esc="announcement[3]"/> - <b>End Date:</b> <t t-esc="announcement[4]"/></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

JavaScript Part:

hr_announcement: function(e) {
    let announcementID = document.getElementById('announcementID').innerHTML;
    console.log(announcementID)
    e.preventDefault();
},