title: jQuery.each() to limit number of table data per row
body: <p>I am trying to display table data using jQuery.ajax(). Everything seems to be functioning properly, but I want an output that will display 3 table data per table row. I have five data namely A, B, C, D, E. The output that I want should look something like this:</p>
  
  <pre><code>A B C
  D E
  </code></pre>
  
  <p>Here's my code:</p>
  
  <pre><code>$.ajax({
      type: 'get',
      url: 'php/init.php?display-images',
      dataType: 'json',
      success: function(data){
          var max_rows = 3;
          var row_counter = 0;
          $('#tbl-mydesigns').append('&lt;tr&gt;');
          $.each(data, function(index, item){
              while(row_counter &lt; max_rows){
                  $('#tbl-mydesigns tr').append('&lt;td&gt;'+item.imagename+'&lt;/td&gt;');
                  row_counter++;
              }
          });
      }
  });
  </code></pre>
  
  <p>However, it gives me this output:</p>
  
  <pre><code>A A A
  </code></pre>
  
  <p>Thanks in advance!</p>