JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="pt-6">
    <!-- card -->
    <div class="bg-white px-6 py-6 rounded-md shadow w-full inline-flex mt-4 font-poppins">
        <div class="flex w-full space-x-2">
            <div class="w-4/5">
                <table id="undist" class="st-table w-full">
                    <thead>
                        <tr>
                            <th class="text-left font-bold rounded-tl-lg">
                                <input id="undistributed-check-all" type="checkbox" class="cursor-pointer rounded">
                            </th>
                            <th class="pl-0 text-left font-bold">STUDENT ID</th>
                            <th class="pl-0 text-left font-bold rounded-tr-lg">NAME</th>
                        </tr>
                    </thead>
                    <tbody class="undistributed-table-body">
                            <tr class="undistributed-row-tr bg-gray-50 hover:st-bg-color-secondary-i hover:text-white p-0 cursor-pointer">
                                <td class="">
                                    <input type="checkbox" name="" class="undistributed-check-one cursor-pointer rounded" value="1">
                                </td>
                                <td class="pl-0">
                                    <input type="text" class="border-0 font-bold p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-28" value="IIECRI-B2-0000" readonly>
                                </td>
                                <td class="pl-0">
                                    <input type="text" class="border-0 p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-full" value="MUHAMMAD ROBBI ZsadadsaULFIKAR" readonly tooltip="a">
                                </td>
                            </tr>
                            <tr class="undistributed-row-tr...

JavaScript

$('#undist').on('click', '.undistributed-row-tr', function(e) {
  if ($(e.target).is('[type=checkbox]')) return;
  const $chk = $(this).closest('tr').find('.undistributed-check-one');
  const checked = $chk.prop('checked')
  $chk.prop('checked', !checked)

});
$('#undist').on('click', function() {
  const len = $('.undistributed-check-one:checked').length;
  $('#move-to-distributed').prop('disabled', len === 0)
});

$('#dist').on('click', '.distributed-row-tr', function(e) {
  if ($(e.target).is('[type=checkbox]')) return;
  const $chk = $(this).closest('tr').find('.distributed-check-one');
  const checked = $chk.prop('checked')
  $chk.prop('checked', !checked)

});
$('#dist').on('click', function() {
  const len = $('.distributed-check-one:checked').length;
  $('#move-to-undistributed').prop('disabled', len === 0)
});

$('#undistributed-check-all').on('change', function() {
  $('.undistributed-check-one').prop('checked', this.checked);
});
$('#distributed-check-all').on('change', function() {
  $('.distributed-check-one').prop('checked', this.checked);
});

$('#move-to-undistributed').on('click', function() {
  $('.distributed-row-tr').find(':checked').each(function() {
    $(this).closest('tr').appendTo('.undistributed-table-body')
  });
})