How to sum rows of different table and append in a new table with javascript/jquery

Question

I have six html tables each with there own theme. Each table has two rows. Each row has to have a total sum. The sum of each table has to be placed in a another table (the table_tot). The code I discoverd does nearly the trick, but it sums all the row of all the tables at the end. In the code you can see that the second row in the table_tot is the sum of alle the rows of the two tables. I've tried to gave the td another class name, but that was not the solution. I hope someone has. My knowledge of javascript or jquery is very little.

 var totals = [0, 0]; $(document).ready(function() { var $dataRows = $(".table_1 tr:not('.titlerow')"); $dataRows.each(function() { $(this).find('.count').each(function(i) { totals[i] += parseInt($(this).html()); }); $(".table_tot td.totalCol_1").each(function(i) { $(this).html(+totals[i]); }); }); var $dataRows = $(".table_2 tr:not('.titlerow')"); $dataRows.each(function() { $(this).find('.count').each(function(i) { totals[i] += parseInt($(this).html()); }); $(".table_tot td.totalCol_2").each(function(i) { $(this).html(+totals[i]); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table_1"> <tr class="titlerow"> <th>Thema</th> <th>Moment 1</th> <th>Moment 2</th> </tr> <tbody> <tr> <td>Theme 1</td> <td class="count">4</td> <td class="count">5</td> </tr> <tr> <td>Theme 2</td> <td class="count">5</td> <td class="count">7</td> </tr> <tr> <td>Theme 3</td> <td class="count">8</td> <td class="count">6</td> </tr> <tr> <td>Theme 4</td> <td class="count">4</td> <td class="count">5</td> </tr> <tr> <td>Theme 5</td> <td class="count">4</td> <td class="count">7</td> </tr> <tr> <td>Theme 6</td> <td class="count">6</td> <td class="count">8</td> </tr> </tbody> </table> <table class="table_2"> <tr class="titlerow"> <th>Theme</th> <th>Moment 1</th> <th>Moment 2</th> </tr> <tbody> <tr> <td>Theme 1</td> <td class="count">4</td> <td class="count">6</td> </tr> <tr> <td>Theme 2</td> <td class="count">5</td> <td class="count">7</td> </tr> <tr> <td>Theme 3</td> <td class="count">8</td> <td class="count">6</td> </tr> <tr> <td>Theme 4</td> <td class="count">4</td> <td class="count">9</td> </tr> <tr> <td>Theme 5</td> <td class="count">4</td> <td class="count">7</td> </tr> <tr> <td>Theme 6</td> <td class="count">6</td> <td class="count">8</td> </tr> </tbody> </table> <table class="table_tot"> <tr> <th>Thema</th> <th>Moment 1</th> <th>Moment 2</th> </tr> <tr> <td>Theme 1</td> <td class="totalCol_1"></td> <td class="totalCol_1"></td> </tr> <tr> <td>Theme 2</td> <td class="totalCol_2"></td> <td class="totalCol_2"></td> </tr> </table>

Answer 1

The sums of the 2nd row of table_tot are the sums of all table rows because totals isn't [0,0] when the sums of table_2 are calculated, but [31,38] . The easiest way to solve this is to have a 2nd totals variable:

 var totals = [0, 0]; var totals2 = [0, 0]; $(document).ready(function() { var $dataRows = $(".table_1 tr:not('.titlerow')"); $dataRows.each(function() { $(this).find('.count').each(function(i) { totals[i] += parseInt($(this).html()); }); $(".table_tot td.totalCol_1").each(function(i) { $(this).html(+totals[i]); }); }); var $dataRows = $(".table_2 tr:not('.titlerow')"); $dataRows.each(function() { $(this).find('.count').each(function(i) { totals2[i] += parseInt($(this).html()); }); $(".table_tot td.totalCol_2").each(function(i) { $(this).html(+totals2[i]); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table_1"> <tr class="titlerow"> <th>Thema</th> <th>Moment 1</th> <th>Moment 2</th> </tr> <tbody> <tr> <td>Theme 1</td> <td class="count">4</td> <td class="count">5</td> </tr> <tr> <td>Theme 2</td> <td class="count">5</td> <td class="count">7</td> </tr> <tr> <td>Theme 3</td> <td class="count">8</td> <td class="count">6</td> </tr> <tr> <td>Theme 4</td> <td class="count">4</td> <td class="count">5</td> </tr> <tr> <td>Theme 5</td> <td class="count">4</td> <td class="count">7</td> </tr> <tr> <td>Theme 6</td> <td class="count">6</td> <td class="count">8</td> </tr> </tbody> </table> <table class="table_2"> <tr class="titlerow"> <th>Theme</th> <th>Moment 1</th> <th>Moment 2</th> </tr> <tbody> <tr> <td>Theme 1</td> <td class="count">4</td> <td class="count">6</td> </tr> <tr> <td>Theme 2</td> <td class="count">5</td> <td class="count">7</td> </tr> <tr> <td>Theme 3</td> <td class="count">8</td> <td class="count">6</td> </tr> <tr> <td>Theme 4</td> <td class="count">4</td> <td class="count">9</td> </tr> <tr> <td>Theme 5</td> <td class="count">4</td> <td class="count">7</td> </tr> <tr> <td>Theme 6</td> <td class="count">6</td> <td class="count">8</td> </tr> </tbody> </table> <table class="table_tot"> <tr> <th>Thema</th> <th>Moment 1</th> <th>Moment 2</th> </tr> <tr> <td>Theme 1</td> <td class="totalCol_1"></td> <td class="totalCol_1"></td> </tr> <tr> <td>Theme 2</td> <td class="totalCol_2"></td> <td class="totalCol_2"></td> </tr> </table>