Javascript: Add leaflet polyline on marker click

For a project I am trying to use a leaflet map. These map will have a lot of markers. When clicking on one of these markers, I want to open a popup within the map as well as displaying a polyline. It should be possible to open multiple markers at a time.

Right now, I have stored all polylines in separate variables polyline1, polyine2, …, and show and hide them as an popupopen / popupclose event. As these polylines are quite long and complex, the loading performance of the size is decreasing drastically with increasing number of markers. That’s why I am thinking of dynamically loading the polylines just in time when clicking on a marker by an AJAX request.

However, even without the AJAX request, I am not able to remove a polyline when the popup is closed. Instead I am receiving an javascript error, that “polyline is not defined”, as you can see in the snippet below.

As far as I understand, the polyline variable is not longer available in the popupclose event. Is there a possiblity to assign the polyline created at on popupopen event with the respective popupclose event?

// center of the map
var pos1 = [-33.8650, 151.2094];
var pos2 = [-34.8650, 150.2094];

// Create the map
var map = L.map('map').setView(pos1, 6);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
marker1 = L.marker(pos1).addTo(map);
marker2 = L.marker(pos2).addTo(map);

marker1.bindPopup('Sydney',{closeOnClick: false, autoClose: false}).on('popupopen',
  function(e) {
    var polyline = L.polyline([
      [-33.8650, 151.2094],
      [52.51975, 13.38017]
    ]);
    map.addLayer(polyline);
  }
).on('popupclose', function(e) {
  map.removeLayer(polyline);
});

marker2.bindPopup('Canberra',{closeOnClick: false, autoClose: false}).on('popupopen',
  function(e) {
    var polyline = L.polyline([
      [-34.8650, 150.2094],
      [52.51975, 13.38017]
    ]);
    map.addLayer(polyline);
  }
).on('popupclose', function(e) {
  map.removeLayer(polyline);
});
#map {
  height: 400px;
  width:600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>

<div id="map"></div>