OpenLayers - Map is gone when changing view

I am using the same layer-definition for different maps with the same view. I got two problems: (1) When I am adding a new div with the osm definition (See below), the old osm-view is gone.

This happens when I check the 2018 checkbox after the 2019 checkbox. Before the right div was over the whole page and the osm was viewable

(2) When I try to move the view, the layer is completely gone. If I click on the map and drag it to change the view the map is gone.

Here is my Code:

html of this part:

<div id="mapcontainer">
<div id="map0"></div>
<div class="third" id="third2018">
    <div id="map2018" class="map"></div>
</div>
<div class="third" id="third2019"> 
    <div id="map2019" class="map"></div>
</div>      
<div class="third" id="third2020">
    <div id="map2020" class="map"></div>
</div>

JS: Note: the checkboxes got the ids 2018 2019 2020.

var center_start = [495445, 5715029];
var zoom_start = 8;
var projection25832 = new ol.proj.Projection({
    code: 'EPSG:25832',
    // The extent is used to determine zoom level 0. Recommended values for a
    // projection's validity extent can be found at https://epsg.io/.
    extent: [-1877994.66, 3932281.56, 1836715.13, 9440581.95],
    units: 'm'
    }); 


var topo =  new ol.layer.Tile({
                source: new ol.source.TileWMS({
                                url:"https://sgx.geodatenzentrum.de/wms_topplus_open?",
                                params:{
                                    'LAYERS': "p25",
                                    'TILED': false
                                        }
                                    })
                            });

var osm = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                                url: 'https://ows.terrestris.de/osm-gray/service?',
                                    params: {
                                       'LAYERS': "OSM-WMS",
                                       'VERSION': '1.1.0',
                                        'FORMAT': 'image/png',
                                        'TILED': false
                                        }
                                        })
                                    })     ;           

var view = new ol.View({
    projection: projection25832,
    center: center_start,
    zoom: zoom_start
    });





 var map2018 = new ol.Map({
    target: 'map2018',
    layers: [osm],
    view: view
    });
                             
                      

var map2019 = new ol.Map({
    target: 'map2019',
    layers: [osm],
    view: view
    });


    
var map2020 = new ol.Map({
    target: 'map2020',
    layers: [osm],
    view: view
    });


// add Map 0
var map0 = new ol.Map({
    target: 'map0',
    layers: [osm],
    view: view
    });


var Mapcount = 0;
 /////////
$("#2018").change(function (){
    if ($("#2018").is(':checked')){
    Mapcount = Mapcount + 1;
    document.getElementById('map0').style.display='none';
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.display = 'block';
    map2018.updateSize();
}else{
    Mapcount = Mapcount -1;
    document.getElementById('third2018').style.display = 'none';
    if(Mapcount === 0){
        document.getElementById('map0').style.display='block';
        map0.updateSize();
    }else{
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    map2019.updateSize();
    map2020.updateSize();
    };            
    };
});


$("#2019").change(function (){
     if ($("#2019").is(':checked')){
    Mapcount = Mapcount + 1;
    document.getElementById('map0').style.display='none';
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.display = 'block';
    map2019.updateSize();
}else{
    Mapcount = Mapcount -1;
    document.getElementById('third2019').style.display = 'none';
    if(Mapcount === 0){
        document.getElementById('map0').style.display='block';
        map0.updateSize();
    }else{
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    map2019.updateSize();
    map2020.updateSize();
    };            
    };
});



$("#2020").change(function (){
    if ($("#2020").is(':checked')){
    Mapcount = Mapcount + 1;
    document.getElementById('map0').style.display='none';
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    map2019.updateSize();
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2020').style.display = 'block';
    map2020.updateSize();
}else{
    Mapcount = Mapcount -1;
    document.getElementById('third2020').style.display = 'none';
    if(Mapcount === 0){
        document.getElementById('map0').style.display='block';
        map0.updateSize();
    }else{
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    map2019.updateSize();
    map2020.updateSize();
    };            
    };
});

EDIT: When only map0 is shown I can drag the map and zoom etc.

Solution

You cannot reuse a layer but you can reuse a source

var osmSource = new ol.source.TileWMS({
                  url: 'https://ows.terrestris.de/osm-gray/service?',
                  params: {
                    'LAYERS': "OSM-WMS",
                    'VERSION': '1.1.0',
                    'FORMAT': 'image/png',
                    'TILED': false
                  }
                });

Then in each map use

layers: [new ol.layer.Tile({
           source: osmSource
        })],