JSFiddle - React, Tailwind, and code Playground

HTML

<table><tr>
                      <td align="center">2</td>
                      <td align="center">2007 / 00006</td>
                      <td align="center">Yousef</td>
                      <td align="center">GR5 / A</td>
                      <td align="right">0.000</td>
                      <td align="right">1000.000
                    <input type="checkbox" name="checkbox5" id="checkbox5" class="checkbox1" value="1000"></td>
                      <td align="right">1000.000
                    <input type="checkbox" name="checkbox8" id="checkbox8" class="checkbox1" value="1000"></td>
                      <td align="right">1000.000
                    <input type="checkbox" name="checkbox11" id="checkbox11" class="checkbox1" value="1000"></td>
                      <td align="right"><strong> 3000.000</strong></td>
                    </tr>
                <tr>
                      <td align="center">3</td>
                      <td align="center">2012 / 00058</td>
                      <td align="center">Ghalia</td>
                      <td align="center">KG2 / C</td>
                      <td align="right">0.000</td>
                      <td align="right">0700.000
                    <input type="checkbox" name="checkbox6" id="checkbox6" class="checkbox1" value="700"></td>
                      <td align="right">0700.000
                    <input type="checkbox" name="checkbox9" id="checkbox9"  class="checkbox1" value="700"></td>
                      <td align="right">0700.000
                    <input type="checkbox" name="checkbox12" id="checkbox12" class="checkbox1"  value="700"></td>
                      <td align="right"><strong> 2100.000</strong></td>
                    </tr>
                <tr>`enter code here`
                      <td align="center" class="hide-xs">&nbsp;</td>
                      <td align="center" class="hide-xs">&nbsp;</td>
                      <td align="center" class="hide-xs">&nbsp;</td>
                     ...

JavaScript

$(document).ready(function() {


    // Select all
        $('#selecctall').click(function(event) {  //on click 
            if(this.checked) { // check select status
                $('.checkbox1').each(function() { //loop through each checkbox
                    this.checked = true;  //select all checkboxes with class "checkbox1"               
                });
            }else{
                $('.checkbox1').each(function() { //loop through each checkbox
                    this.checked = false; //deselect all checkboxes with class "checkbox1"                       
                });         
            }
        });

    });

    //Addition for checked value
    $('input').click(function(){
        var sum = 0;
        $('input[type=checkbox]:checked').each(function() {
            sum += Number($(this).val());
        });
        console.log(sum);
         $("#sum").html(sum);
    });

    //popover
    //$(document).ready(function(){
        //$('.pop').popover({content: "Other Expenses 200 <br> Other Expenses 200 <br>Other Expenses 200 <br> ", html: true, placement: "right", trigger: "focus"}); 
    //});