One Function works on different tables - html

Question

I have a table generated in a backend. My task is to wrap text in each header column and add it to each body column cells by using .html() and .prepend(). It works as expected (you will see text in green).
Problem: If there are 2 independent tables in a page, it will be mess up. Green text in the first table looks as expected, but it will take header text from the first table and add to body column cells of second table as an image below:
The 2 tables should be like the image below
How to fix this issue, please give me a hand. Thanks
$(document).ready(function() {
$("table thead tr th").each(function(i) {
let bodyCode = $("<span>", {
text: $(this).text()
});
$(`table tbody tr td:nth-child(${i+1})`).prepend(bodyCode);
});
});
table {
width: 100%;
border: 1px solid gray
}
span {
color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<table>
<thead>
<tr>
<th>Day</th>
<th>Earn</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>$100</td>
</tr>
<tr>
<td>Tuesday</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</p>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td>$200</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$180</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

Answer 1

The main issue is that you need to loop through each table first.
So this code:
Gets each table element in the each.
Gets the th elements in that specific table using each
Gets the text you want from the th element and sets it to <span> tag
Then gets the current th element, finds its parent (table), and then finds each td element.
$(document).ready(function() {
// Loop through each table
$("table").each(function() {
// find all the tds in each table
let th = $(this).find('thead tr th');
// Loop through each th in the table
th.each(function(i) {
let bodyCode = $("<span>", {
text: $(this).text()
});
// find the td elements in this specific table.
$(this).parents('table').find(`tbody td:nth-child(${i+1})`).prepend(bodyCode);
});
});
});
table {
width: 100%;
border: 1px solid gray
}
span {
color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Day</th>
<th>Earn</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>$100</td>
</tr>
<tr>
<td>Tuesday</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<br>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td>$200</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$180</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<p> added extra tables for proof of concept</p>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td>$200</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$180</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<br>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>