title: Jquery clone only repeating once. Need to repeat multiple times
body: <p>I'm working on some existing code which is in html tables. I need to copy the text from the 'th' header rows and duplicate them inside the corresponding td cells for every subsequent row. I have managed to get the header row to copy but it will only repeat on the first row. How can I get it to repeat on every row that follows? Thanks!</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>$(document).ready(function() {
    $('.head').each(function(i) {
      var $content = $('.new').eq(i);
      $(this).clone().prependTo($content);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table,
  tbody,
  tr,
  th,
  td {
    border: 1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
  &lt;table id="table-container"&gt;
    &lt;tbody&gt;
      &lt;tr class="header"&gt;
        &lt;th class="head"&gt;Header 1&lt;/th&gt;
        &lt;th class="head"&gt;Header 2&lt;/th&gt;
        &lt;th class="head"&gt;Header 3&lt;/th&gt;
        &lt;th class="head"&gt;Header 4&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="row&gt;"&gt;
        &lt;td class="new"&gt;Row 1&lt;/td&gt;
        &lt;td class="new"&gt;Row 2&lt;/td&gt;
        &lt;td class="new"&gt;Row 3&lt;/td&gt;
        &lt;td class="new"&gt;Row 4&lt;/td&gt;
     &lt;/tr &gt;
     &lt;tr class="alt&gt;"&gt;
        &lt;td class="new"&gt;Row 1&lt;/td&gt;
        &lt;td class="new"&gt;Row 2&lt;/td&gt;
        &lt;td class="new"&gt;Row 3&lt;/td&gt;
        &lt;td class="new"&gt;Row 4&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>