title: What am I doing wrong in this jQuery API function?
body: <p>Goodmorning everyone,</p>
  
  <p>I am currently having some issues with my jQuery code.
  I am trying to use the CoinMarketCap API at <a href="https://cryptokickoff.nl/cryptocurrency/" rel="nofollow noreferrer">cryptokickoff</a> to display cryptocurrencies their stats on my site. I know how to display them but the appending to my columns is not working right.</p>
  
  <p>What I'm trying to do:
   - I give an array which cointains the crypto's I want to display from the API
   - I want to append each crypto to a row, which starts at 0 (var i) and goes up by one for every crypto</p>
  
  <p>Now what's happening is that all the crypto's are put into the row with id crypto-3 and I have no idea how that is happening.</p>
  
  <p>Any help would be highly appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fillGrid() {
   var cryptos = ["bitcoin","ethereum","ripple"];
   var i = 0;
   jQuery(cryptos).each(function(){
    jQuery.get( "https://api.coinmarketcap.com/v1/ticker/"+cryptos[i]+"/", function( data ) {
        jQuery("#crypto-"+i).append(
         data[0].name);
    });
    i++;
   })
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.min.js"
          type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="api.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 col-md-6 col-lg-4" id="crypto-0"&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-12 col-md-6 col-lg-4" id="crypto-1"&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-12 col-md-6 col-lg-4" id="crypto-2"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 col-md-6 col-lg-4" id="crypto-3"&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-12 col-md-6 col-lg-4" id="crypto-4"&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-12 col-md-6 col-lg-4" id="crypto-5"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    fillGrid();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>