title: Why is jquery.each executing twice?
body: <p>JSFiddle here: <a href="http://jsfiddle.net/xgTt2/3/" rel="nofollow">http://jsfiddle.net/xgTt2/3/</a></p>
  
  <p>I have a <code>$.each</code> nested inside of a <code>$.each</code>, and I'm not sure why the second <code>$.each</code> is running twice. Any ideas?</p>
  
  <pre><code>var serverResponse = [{"Id":"aaa","OrderItems":[{"Id":1,"Description":"Salad"},{"Id":2,"Description":"Pizza"}]},{"Id":"bbb","OrderItems":[{"Id":3,"Description":"Salad"},{"Id":4,"Description":"Pizza"}]}];
  
  $.each(serverResponse, function (index) {
    var pos = serverResponse[index];
  
    $('#placeholder').append('&lt;p&gt;' + pos.Id + '&lt;/p&gt;')
  
    $.each(pos.OrderItems, function (index) {
       $('.orderitem').append('&lt;p&gt;' + this.Id +  
                         ' ' + this.Description + '&lt;/p&gt;')
    });
  
  });
  </code></pre>
  
  <p>The above javascript is producing the following output:</p>
  
  <pre><code>aaa
  1 Salad
  2 Pizza
  3 Salad
  4 Pizza
  bbb
  3 Salad
  4 Pizza
  </code></pre>
  
  <p>I want this:</p>
  
  <pre><code>aaa
  1 Salad
  2 Pizza
  bbb
  3 Salad
  4 Pizza
  </code></pre>
  
  <p>Any idea what I'm doing wrong? Here's a working example of the problem: <a href="http://jsfiddle.net/xgTt2/3/" rel="nofollow">http://jsfiddle.net/xgTt2/3/</a></p>