How to enable Dropdownlist by Checkbox in multirow table using JavaScript HTML

I want to control the dropdownlist to be enabled when the checkbox is checked by respective rows. My current progress I manage to enable and disable the dropdownlist but its not controlled by the respective rows.

Whenever the checkbox is checked, all dropdownlist were enabled.

the php code is partly from html:

<td>
    <select class="selection" name="lotDist[]" > 
    <option></option>';

    ==== sql queries in here ====

    while ($row2 = sqlsrv_fetch_array($stmt,SQLSRV_FETCH_ASSOC))
    {
        echo '
        <option value="'.$row["LotNo"].' / '.$row2["Grouping"].' - '.$row2["InBulkForm"].'"> 
        '.$row2["Grouping"].' - '.$row2["InBulkForm"].'</option> ';
    }  
    echo '
    </select>
</td>
<td>'.$row["LoadingWeek"].'</td>
<td>                   
    <input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row["LotNo"].'" '.$check.'>
</td>



<script>    
    $(document).ready(function() {
        $('.selection').attr('disabled', 'disabled');

        var $checkBox = $('.chkBox');

        $checkBox.on('change', function(e) {
            //get the previous element to us, which is the select
            var $select = $('.selection')

            if (this.checked) {
                $select.removeAttr('disabled');
            } else {
                $select.attr('disabled', 'disabled');
            }
        });
    });
</script>