title: Create divs using a for loop in jQuery and assign IDs to each div
body: <p>I am currently creating divs using a for loop.</p>
  
  <p>The problem is when I try to assign a unique id to every div element that is being created within the for loop.</p>
  
  <p>I am getting closer but at the moment the count starts at 36 instead of being 1.</p>
  
  <p>Thanks so much for you help!</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Intro Webpage!&lt;/title&gt;
  
  &lt;meta charset="UTF-8" /&gt; 
  &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now, this is my script.js:</p>
  
  <pre><code>for(i = 0; i &lt; 35; i++) {
  $(document).ready(function(){
      $('body').append('&lt;div id="div'+ (i++) +'" /&gt;');
  });
  }
  </code></pre>
  
  <p>Also, my css:</p>
  
  <pre><code>div {
  width: 167px;
  height: 167px;
  border-radius: 10px;
  background-color: #ff0000;
  display: inline-block;
  margin-left: 5px;
  }
  </code></pre>