Built a Store Locator - Need to zoom back out when closing pop-up

Question

I've built a store locator using the following guide but would love to zoom back out to the zoom level I've set on page load when closing the pop-up.

https://docs.mapbox.com/help/tutorials/building-a-store-locator/

Right now nothing happens after closing the poup-up and the user is forced to zoom out themselves to view the full map. Has anyone figured anything out?

    mapboxgl.accessToken = 'pk.eyJ1IjoibmNoZXN0ZXI5MTkiLCJhIjoiY2t3NWFqaWliMG9zNzJ3bzhlMWQ3aXEyNyJ9.T_Z0pW3w6tZOftLeoJU-fA';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/nchester919/ckw5pnpyp0tfp14s5xo5trf4b',
        center: [   -79.019302, 35.759575],
        zoom: 6,
        scrollZoom: true
    });

  map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('page-template')}));

  const nav = new mapboxgl.NavigationControl({
    showZoom: true,
    showCompass: true,
  });
  map.addControl(nav, 'top-right');

  const popup = new mapboxgl.Popup({
    closeButton: true,
  });



  const stores = {
    "type": "FeatureCollection",
    "features": [


  $lat = get_sub_field('latitude');
  $log = get_sub_field('longitude');
  $county = get_sub_field('county');
  $region = get_sub_field('region') ?: 'central';
  $city = get_sub_field('city');
  $image = get_sub_field('image') ?: get_template_directory_uri().'/img/retire-home.jpg';
  $desc = esc_html(get_sub_field('desc'));
  $phone = get_sub_field('phone');
  $address = esc_html(get_sub_field('address'));
  $url = get_sub_field('url');

    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
                    <?php echo '-'.$log; ?>,
                    <?php echo $lat; ?>
        ]
      },
      "properties": {
        "phoneFormatted": "<?php echo $phone; ?>",
                "county": "<?php echo $county; ?>",
                "desc": "<?php echo $desc; ?>",
                "url": "<?php echo $url; ?>",
        "urlp": "<?php echo parse_url($url, PHP_URL_HOST); ?>",
                "region": "<?php echo $region; ?>",
        "city": "<?php echo $city; ?>",
                "imageUrl": "<?php echo $image; ?>",
      }
    },
  ]
};

/* Assign a unique ID to each store */
stores.features.forEach(function (store, i) {
store.properties.id = i;
});

map.on('load', () => {

    addMarkers();

    map.addSource('places', {
    type: 'geojson',
    data: stores
    });
    
    buildLocationList(stores);
});

function addMarkers() {
  /* For each feature in the GeoJSON object above: */
  for (const marker of stores.features) {
    /* Create a div element for the marker. */

    const el = document.createElement('div');
    /* Assign a unique `id` to the marker. */
    el.id = `marker-${marker.properties.id}`;
    /* Assign the `marker` class to each marker for styling. */
    el.className = `marker marker-${marker.properties.region}`;

    /**
     * Create a marker using the div element
     * defined above and add it to the map.
     **/
    new mapboxgl.Marker(el, { offset: [0, -23] })
      .setLngLat(marker.geometry.coordinates)
      .addTo(map);

        el.addEventListener('click', (e) => {
            /* Fly to the point */
            flyToStore(marker);
            /* Close all other popups and display popup for clicked store */
            createPopUp(marker);
            /* Highlight listing in sidebar */
            const activeItem = document.getElementsByClassName('active');
            e.stopPropagation();
            if (activeItem[0]) {
                activeItem[0].classList.remove('active');
            }
            const listing = document.getElementById(`listing-${marker.properties.id}`);
            listing.classList.add('active');
        });

  }
}




function buildLocationList(stores) {
  for (const store of stores.features) {

    /* Add a new listing section to the sidebar. */
    const listings = document.getElementById('listings');
    const listing = listings.appendChild(document.createElement('div'));
    
        /* Assign a unique `id` to the listing. */
    listing.id = `listing-${store.properties.id}`;
    /* Assign the `item` class to each listing for styling. */

    listing.className = `ccpop_item ccmap-${store.properties.region}`;

    /* Add the link to the individual listing created above. */
    const link = listing.appendChild(document.createElement('a'));
    link.href = '#map';
    link.className = 'ccpop_link';
    link.id = `link-${store.properties.id}`;
    link.innerHTML = `Locate on Map`;


        link.addEventListener('click', function () {
            for (const feature of stores.features) {
                if (this.id === `link-${feature.properties.id}`) {
                    flyToStore(feature);
                    createPopUp(feature);
                }
            }
            const activeItem = document.getElementsByClassName('active');
            if (activeItem[0]) {
                activeItem[0].classList.remove('active');
            }
            this.parentNode.classList.add('active');
        });

    /* Add details to the individual listing. */

    const details = listing.appendChild(document.createElement('div'));
    details.innerHTML = `<div class="ccpop_county">${store.properties.county}</div>`;

        if (store.properties.city) {
      details.innerHTML += `<div class="ccpop_address">${store.properties.city}</div>`;
    }

        if (store.properties.url) {
      details.innerHTML += `<a class="ccpop_urllist" target="_blank" href="${store.properties.url}">${store.properties.urlp}</a>`;
    }

    if (store.properties.distance) {
      const roundedDistance = Math.round(store.properties.distance * 100) / 100;
      details.innerHTML += `<div><strong>${roundedDistance} miles away</strong></div>`;
    }

  }
}


function flyToStore(currentFeature) {
  map.flyTo({
    center: currentFeature.geometry.coordinates,
    zoom: 15
  });

  jQuery('.mapboxgl-popup-close-button').on('click', function () {
    map.zoomOut({
      center: [ -79.019302, 35.759575],
      zoom: 6,
      scrollZoom: true
    });
  });
  
}

function createPopUp(currentFeature) {
  const popUps = document.getElementsByClassName('mapboxgl-popup');
  /** Check if there is already a popup on the map and if so, remove it */
  if (popUps[0]) popUps[0].remove();

  const popup = new mapboxgl.Popup({ closeOnClick: true })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML(`<div style="background-image: url('${currentFeature.properties.imageUrl}');" class="ccpop_image"></div><header class="ccpop_heading">${currentFeature.properties.county}</header><span class="ccpop_desc">${currentFeature.properties.desc}</span><span class="ccpop_more">More Information</span><a class="ccpop_url" target="_blank" href="${currentFeature.properties.url}">${currentFeature.properties.urlp}</a>`)
    .addTo(map);
}