Jquery Checkbox not changing

the issues is that if you check and then uncheck the vacancy_select checkbox, then check the selection checkbox it doesn't change the vacancy_select check status

I have a few checkboxes on screen, the first checkbox $("input[type=checkbox]#selection") will toggle all other checkboxes, on or off depending on the status of the first checkbox.

$('input[type=checkbox]#selection').on('change', function () {
    let rows = $("tr.content_list > td > input[type=checkbox].vacancy_select");
    for(let i=0; i < rows.length; i++){
        $(rows[i]).attr('checked', this.checked);
    }
});

if, I select or change the status of any of the other checkboxes then these checkboxes

$("tr.content_list > td > input[type=checkbox].vacancy_select") don't updated when marking this $("input[type=checkbox]#selection") checkbox as checked.

$('input[type=checkbox]#selection').on('change', function() {
  let rows = $("input[type=checkbox].vacancy_select");
  for (let i = 0; i < rows.length; i++) {
    $(rows[i]).attr('checked', this.checked);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table  id="list_table" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="selection" name="selection">Selection
            </th>
        </tr>
        <tr>
            <td class="na">
                <a class="btn btn-primary" href="" style="color: #FFF">New Vacancy</a>
            </td>
        </tr>
    </thead>
    <tr class="content_list">
        <td>
            <input type="checkbox" class="vacancy_select" data-vacancy-id="">
       </td>
    </tr>a
    <tr class="content_list">
        <td>
            <input type="checkbox" class="vacancy_select" data-vacancy-id="">
       </td>
    </tr>a
    <tr class="content_list">
        <td>
            <input type="checkbox" class="vacancy_select" data-vacancy-id="">
       </td>
    </tr>
</table>