JSFiddle - React, Tailwind, and code Playground

HTML

<head runat="server">
    <title></title>
   

<body>
    <form id="form1" runat="server">
    <table id="tbl" border="1">
        <tr>
            <td>Uname</td>       
            <td>Add</td>
            <td>Edit</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>my name is</td>
            <td><input type="checkbox" value="1" /></td>
            <td><input type="checkbox" value="0" /></td>
            <td></td>
        </tr>
        <tr>
            <td>Other name</td>
            <td><input type="checkbox" value="1" /></td>
            <td><input type="checkbox" value="0" /></td>
            <td></td>
        </tr>
    </table>
    </form>
</body>

JavaScript

$(document).ready(function () {

            //
            $("#tbl  tr:not(:first-child)").click(function() {   //.each(function () {

              //
              var firstCell  = $(this).find('td:eq(0)').html();

            // get data from cell two
              var chkOne = $(this).find('td:eq(1)').find(':input[type="checkbox"]');//.eq(0).attr('checked');
              var statesOne = '-';

                // get data from cell three
              var chkTwo = $(this).find('td:eq(2)').find(':input[type="checkbox"]'); //.eq(0).attr('value');
              var stateTwo = '-';

               
              var rowIndex = $(this).index(); //alert($(this).index());

                //
              if (chkOne[0].checked) {
                  $(this).find('td:eq(' + rowIndex +')').find(':input[type="checkbox"]').eq(0).prop("value", "1");
                  statesOne = "1";
              }

              else
              {
                  $(this).find('td:eq(' + rowIndex +')').find(':input[type="checkbox"]').eq(0).prop("value", "0");
                  statesOne = "0";
              }


              if (chkTwo[0].checked) {
                  $(this).find('td:eq(' + rowIndex + ')').find(':input[type="checkbox"]').eq(0).prop("value", "1");
                  stateTwo = "1";
              }

              else {
                  $(this).find('td:eq(' + rowIndex + ')').find(':input[type="checkbox"]').eq(0).prop("value", "0");
                  stateTwo = "0";
              }
    
                //
              $(this).find("td:eq(3)").html(firstCell + '-' + statesOne + '-' + stateTwo);

            });
        });
$(".chkbox").change(function () {
    var fcelltext = $(this).parent().parent().find("td:first-child").text();
    //alert(fcelltext);

    var val = "";
    $(this).parent().parent().find(".chkbox").each(function (index) {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            $(this).attr("value", "1");
            val...