I'm currently working on existing HTML table code. My goal is to copy the text from the 'th' header rows and paste them inside the corresponding td cells for each subsequent row. While I have successfully managed to copy the header row, it only repeats on the first row. How can I make it repeat on all following rows? Appreciate any help!
$(document).ready(function() {
$('.head').each(function(i) {
var $content = $('.new').eq(i);
$(this).clone().prependTo($content);
});
});table,
tbody,
tr,
th,
td {
border: 1px solid #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table id="table-container">
<tbody>
<tr class="header">
<th class="head">Header 1</th>
<th class="head">Header 2</th>
<th class="head">Header 3</th>
<th class="head">Header 4</th>
</tr>
<tr class="row>">
<td class="new">Row 1</td>
<td class="new">Row 2</td>
<td class="new">Row 3</td>
<td class="new">Row 4</td>
</tr >
<tr class="alt>">
<td class="new">Row 1</td>
<td class="new">Row 2</td>
<td class="new">Row 3</td>
<td class="new">Row 4</td>
</tr>
</tbody>
</table>
</div>