I have a widget card template which will be used multiple times on a single page by the site's content managers.

<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>

The showHide function works to toggle the visibility for #more-info, but only as long as there's a single instance of the widget on a page.

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

How can I assign unique IDs to each instance of the card?