One Function works on different tables

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:

1. Gets each table element in the each.
2. Gets the th elements in that specific table using each
3. Gets the text you want from the th element and sets it to <span> tag
4. 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>