title: using bootstrap and java script how do i insert several columns in a row using for loop
body: <p>I have a for loop that is looping to create divs and appending it to a content area using java script, I am using bootstrap so the content should be displayed in rows with 3 divs each have col-md-4 class it, so it is like this:</p>
  
  <pre><code>function add_to_page(product) {
  
   for (var category in product) {
    for (var i = 0; i &lt; product[category].length; i++) {
      $('#content').append($('&lt;div id=' + product[category][i].id +'&gt;').html($('&lt;img&gt;').attr('src', product[category][i].img)));
      $('#' + product[category][i].id).append($('&lt;div class=name&gt;').text(product[category][i].name));
      $('#' + product[category][i].id).append($('&lt;div class=category&gt;').text(product[category][i].category));
      $('#' + product[category][i].id).append($('&lt;div class=price&gt;').text('Price: ' + product[category][i].price + 'L.E'));
      $('#' + product[category][i].id).addClass('col-md-4');
      }
    }
  </code></pre>
  
  <p>}</p>
  
  <p>the question is how do i wrap every 3 divs that has the class 'col-md-4' in a div with a class of 'row' in dynamic way inside the loop ?</p>