Creating a row for every second and fifth increment
<p>I have a grid and would like to create a row for every second and fifth increment in my for-loop. It would look something like 2,3,2,3...If I had, say 18 increments how could I achieve this? I tried using <code>i % 3 === 0 || i % 5 === 0</code> in the loop but get a variable result. Math isn't really my strong suit so help would greatly be 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>var container = document.querySelector('.container');
var frag = document.createDocumentFragment();

for (var i = 0; i &lt; 18; i++) {
  var span = document.createElement('div');
  span.classList.add('span');

  if (i % 3 === 0 || i % 5 === 0) {
    var row = document.createElement('div');
    row.classList.add('row');
    frag.appendChild(row)
  }

  if (i % 5 === 0) {
    span.classList.add('span8')
  } else {
    span.classList.add('span4');
  }

  row.appendChild(span);
}

container.appendChild(frag)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
  display: flex;
  border: 1px solid black;
  padding: 10px;
}

.row:not(last-of-type) {
  margin-bottom: 20px;
}

.span {
  border: 1px solid black;
  margin: 0 4px;
  height: 100px;
}

.span8 {
  flex: 1;
}

.span4 {
  flex: .5;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>