JSFiddle - React, Tailwind, and code Playground

HTML

<button id="checkRows">Check Rows</button>
<table id="centerElem">
    <thead>
        <tr>
            <td><input type="checkbox" name="checkall" id="checkall" /></td>
            <td>Dish Name</td>
            <td>Discription</td>
            <td>ingredients</td>
            <td>type</td>
            <td>price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="chk" id="chk"/>
            </td>
            <td class='name'>Rice </td>
            <td>white parboiled rice</td>
            <td>rice</td>
            <td>none</td>
            <td>300</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chk" id="chk"/>
            </td>
            <td class='name'>Beans </td>
            <td>parboiled beans</td>
            <td>beans an d salt</td>
            <td>none</td>
            <td>400</td>
        </tr>
    </tbody>
</table>
<TABLE class="ordertable" style="width:100%; border-collapse:collapse; border: solid 1px #000000">
    <TBODY></TBODY>
    <TFOOT></TFOOT>
</TABLE>

JavaScript

// undeclared vars in provided js
count = 0;
flag = false;
// end undeclared vars

$('#checkRows').click(checkRows);

function checkRows(){
    $('#centerElem tbody tr').each(function(index, items){
         $(this).find('input:checked').each(function(){
             $this = $(this);
             var chkItemcol = $this.parent().siblings('td');
             var chklen = chkItemcol.length;
             var chkItemValue = chkItemcol.eq(0).text();
             var chkItemPrice = chkItemcol.eq(chklen-1).text();
             var sumprice=0;
             createrow ="<tr class='data'><td class='itemQty'>"+count+"</td>";
             // iterate through the columns.
             var mlen = chklen-1;
             for(var i = 0; i<chklen; i++){
                 // add class to the item name
                 if(i == 0){
                     createrow += "<td class='name'>";
                 }else{
                     createrow += "<td>";
                 }
                 createrow += $this.parent().siblings('td').eq(i).text();
             }
             createrow += "</td>";
             createrow += "<td class='subtotal'></td></tr>";
             if(i == (mlen)){
                 sumprice = ($this.parent().siblings('td').eq(0).text()) * ($this.parent().siblings('td').eq().text(mlen));
             }
             createTotal = "<tr><td>Total</td><td class='totalsum'>"+sumprice+"</td></tr>";
    
             $('.ordertable .name').each(function (index, item) {
                 // get the checked <td>
                 var chkItemcol = $this.parent().siblings('td');
                 // get the checked row numbers of columns
                 var $item = $(item);
                 $data = $item.text();
                 var olen = $($item.siblings()).length;
                 var itemprice;
                 var subTotal;
                 if ($data == chkItemValue) {
                     count++;
                     flag = true;
                     //get the  item price
       ...