JSFiddle - React, Tailwind, and code Playground

HTML

<p>mybills </p>
<table border="0" width="100%" align="center"> 
    
    <tr><td colspan="2"><div id="image"></div></td></tr> 
    <tr> 
        <td align="left" id="desc-1"  width="90" class="refTbl" > 
            Task 1 
        </td> 
        <td align="left" id="chk-1" width="40" class="refTbl"> 
            <input type="checkbox" name="jobTypes" id="jobTypes-1" class="billdetail" value="1"   /> 
        </td> 
        
        <td width="30">&nbsp;</td> 
        <td align="left" id="desc-2"  width="90" class="refTbl" > 
            Task 2  
        </td> 
        <td align="left" id="chk-2" width="40" class="refTbl"> 
            <input type="checkbox" name="jobTypes" id="jobTypes-2" class="billdetail"  value="2" checked="checked"  /> 
        </td> 
    </tr>   
    <tr> 
        <td align="left" id="desc-3"  width="90" class="refTbl" > 
            Task 3 
        </td> 
        <td align="left" id="chk-3" width="40" class="refTbl"> 
            <input type="checkbox" name="jobTypes" id="jobTypes-3" class="billdetail"  value="3" checked="checked"  /> 
        </td> 
        
        <td width="30">&nbsp;</td> 
        <td align="left" id="desc-4"  width="90" class="refTbl" > 
            Task 4 
        </td> 
        <td align="left" id="chk-4" width="40" class="refTbl"> 
            <input type="checkbox" name="jobTypes" id="jobTypes-4" class="billdetail"  value="4"   /> 
        </td> 
    </tr>   
    
    <tr> 
        <td align="left" id="desc-5"  width="90" class="refTbl" > 
            Task 5 
        </td> 
        <td align="left" id="chk-5" width="40" class="refTbl"> 
            <input type="checkbox" name="jobTypes" id="jobTypes-5" class="billdetail"  value="5"   /> 
        </td> 
        
        <td width="30">&nbsp;</td> 
        <td align="left" id="desc-6"  width="90" class="refTbl" > 
            Task 6 
        </td> 
        <td align="left" id="chk-6" width="40" class="refTbl"> 
            <input type="checkbox" name="jobTypes"...

JavaScript

$('.billfinal:checkbox')[0].checked = false;
$('.billspaid:checkbox')[0].checked = false;
$('.billfinal:checkbox').attr('disabled', true);
$('.billspaid:checkbox').attr('disabled', true);

$('.billdetail').click(function() {
    if ($('.billdetail:checked').length < $('.billdetail:checkbox').length) {
        $('.billfinal:checkbox')[0].checked = false;
        $('.billspaid:checkbox')[0].checked = false;
        $('.billfinal:checkbox').attr('disabled', true);
        $('.billspaid:checkbox').attr('disabled', true);
    }
    else {
        $('.billfinal:checkbox').attr('disabled', false);
    };
});
$('.billdetail').trigger('click'); //set value based on initial checked count
$('.billfinal').click(function() {
    if (this.checked) {
        $('.billspaid:checkbox').attr('disabled', false);
    }
    else {
       $('.billspaid:checkbox').attr('disabled', true);
    };
});