Okay, so i have a list of businesses each with it's own div created via DOM (document.create(div)) blah blah blah

div business 1. 12 miles (only shows on first div)
div business 2
div business 3 etc.

I'm using Google's Distance Matrix to calculate the users location to the business they choose. I've been able to get the calculations with my code see below. But the distance only shows up for the first div. I've tried every loop possible and still can't get it to post for each business listing

if you're familiar with this api, use the api link below with your own api Key

and plug in your own coordinates to test code

var latitude = localStorage.getItem("userLocationLat");
var longitude = localStorage.getItem("userLocationLong");

  var service = new google.maps.DistanceMatrixService();
  // build request
  var origin1 = new google.maps.LatLng(latitude, longitude);
  var destinationA = new google.maps.LatLng(bizlatitude, bizlongitude);
          var request = {
            origins: [origin1],
            destinations: [destinationA],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL,
            avoidHighways: false,
            avoidTolls: false
          }

         
      service.getDistanceMatrix(request).then((response) => {
          for(var i in response.rows){
             document.getElementById('distance').innerHTML = response.rows[0].elements[0].distance.text;

              //test in console
              console.log(response.rows[0].elements[0].distance.text);
          }

in the console.log I would get all calculations listed but when i look at the actual website it only displays the calculation for the first business listing

div business 1. 12 miles (only shows on the first div)
div business 2
div business 3 etc.

Link to Google Distance Matrix Documentation https://developers.google.com/maps/documentation/javascript/distancematrix