title: Create dynamic Bootstrap 4 Accordion with data from Ajax call
body: <p>I'm attempting to create a Bootstrap 4 Accordion. I'm using an Ajax call to get the data, and the data is correctly logging to console. I'd like to do a ForEach loop, and append a new card to the Accordion for every Album returned in the JSONP dataset. </p>
  
  <p>The issue I'm running into: the HTML loads first, then I receive the data, and then nothing happens after that, accordion does not render. </p>
  
  <p>How do I load the accordion after all the data is ready?</p>
  
  <p>Relevant HTML (artist ID is an integer):</p>
  
  <pre><code>&lt;div id="discogAccordion"&gt;                        
  
    &lt;script type="text/javascript"&gt;
        let url = 'https://api.deezer.com/artist/' + {{ artist_id }} +'/albums?output=jsonp';
    &lt;/script&gt;
  
    &lt;script type="text/javascript" src="{% static "js/tracklist.js" %}"&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant JS (js/tracklist.js):</p>
  
  <pre><code>$(function () {
  $.ajax({
      url: url,
      type: 'GET',
      jsonp: 'callback',
      dataType: 'jsonp',
      crossDomain: true,
      success: function (data) {
          console.log('all data: ', data);
          albumAccordion(data);
      },
      error: function (x, y, z) {
          console.log('x', x);
          console.log('y', y);
          console.log('z', z);
      }
  });
  });
  
  let albumAccordion = function (data) {
      data.data.forEach(function (item, index) {
      console.log(item, index);
      return $('.discogAccordion').append(
  
          '&lt;div class="card"&gt;'+
              '&lt;div class="card-header" id="heading'+ index +'"&gt;'+
                  '&lt;h5 class="mb-0"&gt;'+
                      '&lt;button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse'+ index +'"'+
                              ' aria-expanded="false" aria-controls="collapse'+ index +'"&gt;'+
                          'enim eiusmod high life accusamus terry '+
                      '&lt;/button&gt;'+
                  '&lt;/h5&gt;'+
              '&lt;/div&gt;'+
  
              '&lt;div id="collapse'+ index +'" class="collapse" aria-labelledby="heading'+ index +'" data-parent="#discogAccordion"&gt;'+
                  '&lt;div class="card-body"&gt;'+
                      'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf'+
                  '&lt;/div&gt;'+
              '&lt;/div&gt;'+
          '&lt;/div&gt;'
      );
  });
  };
  </code></pre>