Estoy tratando de obtener el índice de announcement[0] para cada anuncio en el código a continuación, pero sigo obteniendo el mismo índice en [0] cuando console.log que es 17 incluso si hago clic en un anuncio diferente presentado desde el círculo. ¿Cómo capturo cada ID de anuncio [17,18,19....] por separado en 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>

Parte de JavaScript:

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