Show and hide all popup of layers on click of external link - openlayrs3

Question

From below function onOff: function () I get popup from external link but only one popup. Need to show all popup from vecorlayer source.

onOff: function () {
  var abc = ConnectWebMap;
       var vectorSource = new ol.source.Vector({
            projection : 'EPSG:4326',
            format: new ol.format.GeoJSON(),
          url: 'resources/multipoint.geojson'
          });
  featureCount = [];     
       // Get the array of features
var featureCount = vector.getSource().getFeatures();

// Go through this array and get coordinates of their geometry.
featureCount.forEach(function(feature) {
   console.log('get all features' + feature.getGeometry().getCoordinates());
   allpopup = [];
   var allpopup = feature.getGeometry().getCoordinates();
   if (feature) {
      popup.setPosition(allpopup);
    content.innerHTML = feature.get('name');
  }
});

I am adding marker through geojson and showing them on map.on('click', function(evt) But I want to show and hide all popup with button click marker will be visible only poup will show and hide.

From anchor tag need to toggle all popups

<a id="toggle">Show/Hide</a>

Below is my json code

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
          "name": "Missing Person",
          "ref":" Ref 5684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.12755, 51.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted",
           "ref":" Ref 56124"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.12755, 52.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Missing 1",
           "ref":" Ref 1684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-1.12755, 52.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted 3",
           "ref":" Ref 562484"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-2.12755, 53.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted 7",
           "ref":" Ref 522684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.1287, 53.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted 9",
           "ref":" Ref 5685884"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.12755, 50.907222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Missing 8",
           "ref":" Ref 5643484"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.12755, 51.907222]
      }
    }
  ]
} 

Vector Layer

vector = new ol.layer.Vector({
  source: new ol.source.Vector({
   projection : 'EPSG:4326',
   format: new ol.format.GeoJSON(),
   url: 'resources/multipoint.geojson'
 }),
  style: styleFunction1
});

Popup function

            var element = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');



            var popup = new ol.Overlay({
              element: element,
              positioning: 'bottom-center',
              stopEvent: false
            });
            map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  }, null, function(layer) {
    return layer != circleLayer;
  });

  if (feature) {
    popup.setPosition(evt.coordinate);
    content.innerHTML = feature.get('name');

  } else {

  }
});

closer.onclick = function() {
  popup.setPosition(undefined);
  closer.blur();
  return false;
};

Answer 1

Show all popup

on: function () {
  var abc = ConnectWebMap;
  $('#popupGroup').html('');
  var vectorSource = new ol.source.Vector({
    projection : 'EPSG:4326',
    format: new ol.format.GeoJSON(),
    url: 'resources/multipoint.geojson'
  });
  featureCount = [];     
       // Get the array of features
       var featureCount = vector.getSource().getFeatures();

        multiPopup = 0;
// Go through this array and get coordinates of their geometry.
featureCount.forEach(function(feature) {
 // console.log('get all features' + feature.getGeometry().getCoordinates());
 // multiPopup = feature.get('id');
 allpopup = [];
 var allpopup = feature.getGeometry().getCoordinates();
 if (feature) {
   var popupTemplate = '<div id="popup' + multiPopup +'" class="ol-popup">'+
   '<a href="#" id="popup-closer' + multiPopup +'" class="ol-popup-closer"></a>'+
   '<div id="popup-content' + multiPopup +'"></div></div>';
   $('#popupGroup').append(popupTemplate);

   var element = document.getElementById('popup' + multiPopup);
   var content = document.getElementById('popup-content' + multiPopup);
   var closer = document.getElementById('popup-closer' + multiPopup);

   closer.onclick = function() {
    popup.setPosition(undefined);
    closer.blur();
    return false;
  };

hide all popup

off: function () {
  var abc = ConnectWebMap;
  console.log('multiPopup' + multiPopup);
  for(var i = 0; i<multiPopup; i++){
        $('#popup-closer' + i).click();
  };
    $('#popupGroup').html('');
}

};