How to make an unlimited number of Yandex maps on one page?

Question

HTML

The task is to make up a large number of cards on one page, which one is unknown, but there can be a lot of them.
You need to initialize it by clicking, since the cards are in tabs, and, accordingly, when switching to another tab, hide the previous one and show a new one, that is, initialize a new card and remove the old one.
As far as I understand, the Yandex API allows you to call it only by id, so I need to somehow pass this id as a parameter. Ideally, the container should also be sent coordinates via data-attr.
What I have come up with so far:

$(document).ready(function(){
    
    $('.carousel-flights-item').click(function(){
        showMap();
        initYaMap ();
        return false;
    });
    
});

function initYaMap () {

    ymaps.ready(init);
    var myMap;

    function init(){
        myMap = new ymaps.Map ("map", {
            center: [53.35, 83.73],
            zoom: 4
        });
    }

}

<div class="tracking-map">
    <div class="tracking-map__yandex-map" id="map" style="width: 100%; height: 100%"></div>
 </div>

PS If you need additional information or a working code, write and post it on codepen.