title: DOM createElement() dynamically with click event to div specific url element
body: <p>I am attempting to build a 9 divs (cards) dynamically containing information about store branch locations. Each card has a unique URL associated with it that links to each branches specific URL. </p>
  
  <p>This approach, within the function, appends the first (0) URL to all the cards:</p>
  
  <pre><code>$("div").click(function() {
      window.location = $(this).find("a").attr("href"); 
      return false;
  });
  </code></pre>
  
  <p>This approach appends the last URL (8) to all the cards:</p>
  
  <pre><code>branch.addEventListener("click", function(e){
      e.preventDefault();
      window.open(prop.pages_url);   
  }) 
  </code></pre>
  
  <p>Code I'm working with:</p>
  
  <pre><code>function buildLocationList(data) {
    for (i = 0; i &lt; 9; i++) {
      var currentFeature = data.features[i];
      var prop = currentFeature.properties;
  
      //Create Card
      var branches = document.getElementById('branches');
      var url = branches.appendChild(document.createElement('a');
          url.setAttribute('href', prop.pages_url);
      )
      var branch = branches.appendChild(document.createElement('div'));
          branch.className = 'card';
          branch.id = "branch-" + i;
          branch.url = prop.pages_url;
  
          branch.addEventListener("click", function(e){
              e.preventDefault();
              window.open(prop.pages_url);
  
            })  
      //Append Branch Card Details
      v
      var company = branch.appendChild(document.createElement('h5'));
        company.innerHTML = prop.name + '&lt;br /&gt;';
      var distancePhone = branch.appendChild(document.createElement('p'));
          if (prop.distance) {
            var roundedDistance = Math.round(prop.distance * 100) / 100;
            distancePhone.innerHTML = '&lt;span class="miles"&gt;Approx. ' + roundedDistance + ' miles&lt;/span&gt;' + '&lt;span class="location-phone"&gt;' + prop.phone_number + '&lt;/span&gt;';
          }
          else {
            distancePhone.innerHTML = prop.phone_number;
          }
      var address = branch.appendChild(document.createElement('p'));
          if (prop.address_line_2) {
            address.innerHTML += prop.address_line_1 + ', ' + prop.address_line_2 + '&lt;br /&gt;';
          }
          else {
            address.innerHTML += prop.address_line_1 + '&lt;br /&gt;';
          };
          address.innerHTML += prop.address_city + ', ' + prop.address_state + ' ' +prop.address_postal_code  + '&lt;/p&gt;';
    }
  }
  </code></pre>
  
  <p>I would like the card to be clickable with a redirect to each branch's unique URL.</p>