<div id="viewDiv1">
</div>
<div id="viewDiv2">
</div>
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#viewDiv1 {
  padding: 0;
  margin: 0;
  height: 50%;
  width: 100%;
}

#viewDiv2 {
  padding: 0;
  margin: 0;
  height: 50%;
  width: 100%;
}
require([
  "esri/layers/FeatureLayer",
  "esri/Map",
  "esri/views/MapView"
], function(FeatureLayer, ArcGISMap, MapView) {
  
  const flayer1 = new FeatureLayer({
    portalItem: {
      id: "b234a118ab6b4c91908a1cf677941702"
    }
  });
  const map1 = new ArcGISMap({
    basemap: "streets",
    layers: [flayer1]
  });
  const view1 = new MapView({
    container: "viewDiv1",
    map: map1,
    scale: 75000000,
    center: [-98, 41]
  });
  
  const flayer2 = new FeatureLayer({
    portalItem: {
      id: "eed7f427d93440d19c3a494201471d34"
    }
  });
  
  const map2 = new ArcGISMap({
    basemap: "dark-gray",
    layers: [flayer2]
  });
  const view2 = new MapView({
    container: "viewDiv2",
    map: map2,
    scale: 75000000,
    center: [-98, 41]
  });
  
  onClick(view1, view2, flayer1, flayer2);
  onClick(view2, view1, flayer2, flayer1);
  
  function onClick(v1, v2, lyr1, lyr2) {
    v1.on("click", event => {
      event.stopPropagation();
      hitView(event.mapPoint, v1, lyr1);
      hitView(event.mapPoint, v2, lyr2);
    });
  }
 
  function hitView(mapPoint, view, layer) {
    const sp = view.toScreen(mapPoint);
    view.hitTest(sp)
      .then(result => {
      view.whenLayerView(layer).then(lview => {
        const gs = result.results.map(x => x.graphic);
        lview.highlight(gs);
      });
    });
  }

});

External CSS

  1. https://js.arcgis.com/4.8/esri/css/main.css

External JavaScript

  1. https://js.arcgis.com/4.8