JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="table-wrapper" id="pay_out_page">

  <div class="col-md-12">

    <div class="panel panel-default no-display" >
      <div class="panel-heading">
        <i class="fa fa-money" aria-hidden="true"></i>
        Accounting
      </div>
      <div class="panel-body">
        <table class="table table-bordered table-striped table-responsive align-center dataTable multiple-filter no-footer" >
          <thead class="transaction-table">
            <tr>

                  <th>Statement number</th>
                  <th>Affiliate Code</th>
                  <th>Period start - end</th>
                  <th>Amount EUR</th>
                  <th>Due Date</th>
                  <th>Status</th>
                  <th class="text-center" >Action</th>
            </tr>
          </thead>
          <tbody>
                <tr>
                    <td>1</td>
                    <td>1234567</td>
                    <td>2020-10-10</td>
                    <td>32323</td>
                    <td>2020-10-20</td>
                    <td class="text-center">
                        <span class="label label-success">
                           Due
                        </span>
                    </td>
                    <td class="text-center">
                        <input type='checkbox' data-toggle="tooltip" data-original-title="Mark as settled" name='chkOrgRow'/>
                        
                    </td>
                </tr>
           </tbody>
         </table>
          <div class="modal fade" id="ModalConfirmSettled">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                      ...

CSS

.highlight {
        background-color: #5bff5b !important;
    }

JavaScript

$(function () {
        var checkbox_one= '';
        $("[name='chkOrgRow']").change(function(e) {
            $('input[name=chkOrgRow]').prop('checked', false);
            // console.log('clicked');
            checkbox_one = $(this);
            openmodal();
        });

        $('.buttons').on('click', function () {
            var yes = $(this).text();
            if (yes === 'Yes') {
               $("#ModalConfirmSettled").modal('hide');
            if(!$('input[name=chkOrgRow]').prop('checked')){
                $('input[name=chkOrgRow]').prop('checked', false);
            }else{
               $('input[name=chkOrgRow]').prop('checked', true);
            }
                checkbox_one.parents('tr').toggleClass('highlight');
                //return true;
            } else {
            
                console.log('close');
            }
        });
    });

    function openmodal() {
        $('#ModalConfirmSettled').modal('show', function (data) {
            console.log('data:' + data);
        });

    }