JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" width="100%">
    <tbody>
        <tr>
            <th colspan="4">NEW PRODUCTS FOUND</th>
        </tr>
        <tr>
            <th>Shelf</th>
            <th>Product</th>
            <th>Corrected</th>
        </tr>
        <tr class="hover_row hover_row_product pr_row_1">
            <td>aa</td>
            <td>sdcsd</td>
            <td>
                <input type="checkbox" class="product_correction" product_id="1">
            </td>
        </tr>
        <tr class="hover_row hover_row_product pr_row_2">
            <td>aa</td>
            <td>sdcsdc</td>
            <td>
                <input type="checkbox" class="product_correction" product_id="2">
            </td>
        </tr>
        <tr class="hover_row hover_row_product pr_row_3">
            <td>aa</td>
            <td>dbfgbdfgb</td>
            <td>
                <input type="checkbox" class="product_correction" product_id="3">
            </td>
        </tr>
    </tbody>
</table>

CSS

.corrected_row {

    background: rgb(126, 255, 126) !important;

}

.hover_row:hover {

    background-color: rgba(206, 206, 206, 0.9) !important;

}

JavaScript

/*Correction proccess*/
 $('.hover_row_product').click(function (e) {
     var checkbox = $(this).find(':checkbox');
     if ($(e.target).closest('input[type="checkbox"]').length > 0) {
         //check box clicked
     } else {
         checkbox.prop('checked', !checkbox.prop('checked'));
     }
     $prod_id = checkbox.attr('product_id');
     $input_checked = 2;
     if (checkbox.is(':checked')) {
         $input_checked = 1;
         $('.pr_row_' + $prod_id).addClass('corrected_row');
     } else {
         $input_checked = 0;
         $('.pr_row_' + $prod_id).removeClass('corrected_row');
     }
 });