On button click same row checkbox should be checked

Question

I have placed a button and checkbox at end of each row of the table. I want now is that if I click button in row 1 then checkbox only in row 1 gets checked and so on. code is working fine if I go from 1st to last row turn by turn. Problem occurs if I click directly on for eg. 2nd row. if I click in 2nd row then the checkbox in 1st row is selected.

I have tried matching the ids of button and checkbox control but that is not possible as the name in id will always be different.

  cols += '<td><button type="button" class="btn btn-info btn-sm btn-block" onclick="req_ser()" id="check_btn' + limit + '" value="' + data + '">Request</button></td>';

cols +='<td><input type="checkbox" class="chec" id="check' + limit + '" value="' + data + '" disabled="disabled"></input></td>';


function req_ser() {    
    var sl_num = [];
    var count = 0;
    for (var bv = 0; bv <= limit; bv++) {
        var stai;       
        var bvv = bv + 1;
        var cls = document.getElementsByClassName("btn btn-info btn-sm btn-block");
        var chs = document.getElementsByClassName("chec")
        cls[bv].id = "check_btn" + (bv + 1);
        chs[bv].id = "check" + (bv + 1);
        alert(cls[bv].id);
        alert(chs[bv].id);
        //stai = $('#check' + bvv + '').on(':click');
        //stai = $('#check' + bvv + '').is(':clicked'); 
        //stai = $('#check' + bvv + '').data(':clicked', true); 
            $('#check' + bvv + '').prop('checked', true);
            stai = $('#check' + bvv + '').is(':checked');       
        if (stai == true) {
                sl_num.push({
                    "serial": document.getElementById("slnchk" + bvv + "").innerText,
                });            
            break;            
        }
    }

expected result is whichever row button I click only that row checkbox should be checked. Please guide regarding this.

Answer 1

You can do it with .closest() and .find() in jquery.

Example:

$('td .btn').on("click", function() {
  $(this).closest('tr').find('.chec').prop("checked", true);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><button type="button" class="btn btn-info btn-sm btn-block">Request</button></td>
    <td><input type="checkbox" class="chec" disabled="disabled"></td>
  </tr>
  <tr>
    <td><button type="button" class="btn btn-info btn-sm btn-block">Request</button></td>
    <td><input type="checkbox" class="chec" disabled="disabled"></td>
  </tr>
  <tr>
    <td><button type="button" class="btn btn-info btn-sm btn-block">Request</button></td>
    <td><input type="checkbox" class="chec" disabled="disabled"></td>
  </tr>
</table>