Cacher is the code snippet organizer for pro developers

[data-js="hiddenMarkerCoordinates"] {
  display: none;
}

<div class="containerOne">
  
  <?php $randomId = uniqueid() ?>

  <div class="map" id="<?php echo $randomId ?>" data-js="leafletMapContainer"></div>

  <!-- Marker Coordinates for Leaflet -->
  <ul data-js="hiddenMarkerCoordinates">
    <li>50, 45</li>
    <li>50, 46</li>
  </ul>

</div>

<div class="containerTwo">
  
  <?php $randomId = uniqueid() ?>

  <div class="map" id="<?php echo $randomId ?>" data-js="leafletMapContainer"></div>

  <!-- Marker Coordinates for Leaflet -->
  <ul data-js="hiddenMarkerCoordinates">
    <li>51, 45</li>
    <li>51, 46</li>
  </ul>

</div>

(function() {
 
 /**
  * Stores instances of Leaflet map objects.
   * @type {Array}
  */
 var leafletMaps = [];
 
 /**
  * Store references to Leaflet map HTML containers.
  * @type {NodeList}
  */
 var leafletContainers = document.querySelectorAll('[data-js="leafletMapContainer"]');
 
 /**
  * Store references to HTML elements containing hidden coordinates.
  * @type {NodeList}
  */
 var hiddenCoordinatesContainers = document.querySelectorAll('[data-js="hiddenMarkerCoordinates"]');
 
 /**
  * Creates Leaflet map objects.
  */
 function createLeafletMaps() {
   for (var i = leafletContainers.length; i--;) {
     var map = L.map(leafletContainers[i]);
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
     // store reference to Leaflet map
     leafletMaps.push(map);
   }
 }
 
 /**
  * Iterates through Leaflet containers within the HTML in order to (1) instantiate new Leaflet maps and (2) extract
  * hidden marker coordinates used in creating Leaflet markers.
  */
 for (var i = leafletContainers.length; i--;) {
 
   // instantiate new Leaflet map
   var map = L.map(leafletContainers[i]);
   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
   // store reference to Leaflet map
   leafletMaps.push(map);
 
   // extract hidden coordinates corresponding to map and convert them to latitude and longitude
   var hiddenCoordinates = hiddenCoordinatesContainers[i].getElementsByTagName('LI');
 
   // store Leaflet markers
   var markers = [];
 
   // create Leaflet markers
   for (var j = hiddenCoordinates.length; j--;) {
     if (hiddenCoordinates.hasOwnProperty(j)) {
       markers.push(
         new L.marker([
           hiddenCoordinates[j].latitude,
           hiddenCoordinates[j].longitude,
         ])
       );
     }
   }
 
   // add markers to map
   for (var j in markers) {
     markers[j].addTo(map);
   }
 
   // constrain map viewport to fit markers
 
   /**
    * Loop through markers to create North East and South West bounds.
    */
   var minLat = null,
     minLng = null,
     maxLat = null,
     maxLng = null;
 
   for (var j in markers) {
     var markerLatLng = markers[j]._latlng;
 
     // set default values as the first iterated coordinate
     minLat ? null : minLat = markerLatLng.lat;
     minLng ? null : minLng = markerLatLng.lng
     maxLat ? null : maxLat = markerLatLng.lat
     maxLng ? null : maxLng = markerLatLng.lng
 
     // compare min and max coordinates
     minLat = Math.min(markerLatLng.lat, minLat)
     minLng = Math.min(markerLatLng.lng, minLng)
     maxLat = Math.max(markerLatLng.lat, maxLat)
     maxLng = Math.max(markerLatLng.lng, maxLng)
   }
 
   /**
    * Constrain Leaflet viewport to fit markers
    */
   map.fitBounds([[minLat, minLng], [maxLat, maxLng]], {padding: [10, 10]});
 }

})();