Tengo una plantilla de tarjeta de widget que los administradores de contenido del sitio usarán varias veces en una sola página.

 <div class="program-feature-card"> <div class="elementor-cta__bg-wrapper"> <div> Some content here... </div> <a id="click-for-more-info" class="" onclick="showHide()" href="#" >More Info</a> <div id="more-info" class="hide"> More info here... </div> </div>

La función showHide funciona para alternar la visibilidad de #more-info, pero solo mientras haya una sola instancia del widget en una página.

 function showHide() { var element = document.getElementById("more-info"); element.classList.toggle("hide"); var element = document.getElementById("more"); element.classList.toggle("more-active"); }

¿Cómo puedo asignar ID únicos a cada instancia de la tarjeta?