How to display Two Mapbox Maps in a single page (HTML)

Question

Hey guys,

 

I trust you are well.

 

I have a problem I want to display two maps in a tab driven page in html.

 

My HTML:

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#Tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-content">
<div id="Tab1" class="tab-pane fade in active">
<div class="custom-popup" id="map1"></div>
</div>
<div id="Tab2" class="tab-pane fade in active">
<div class="custom-popup" id="map2"></div>
</div>
</div>
</div>

My JS:

<script>
mapboxgl.accessToken = 'MyAccessToken';
var map1 = new mapboxgl.Map({
container: 'mapid',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [25.771944, -30.241943],
zoom: 5
});
//Second Map
var map2 = new mapboxgl.Map({
container: 'advisorymap',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [25.771944, -30.241943],
zoom: 5
});
</script>

The first map is dispalyed but the second one doesnt show.

 

What is it I might be doing wrong?