Passing array from tickboxes to a button- Jquery

So, I am trying to make id of each row into array and when the checked boxes are ticked, a button will show. From this button, we can have all the selected checkboxes id.
Notes: the checkboxes id actually likes this :

<input type="checkbox" id="chkT{$rows.id}" value="{$rows.id}" style="width: 15px; height: 15px;" class="js-checkbox single-row-checkbox" onchange="toggleTick_Change()" />

This is because, each row is getting it’s data from database, hence the {$rows.id}.
In the snippet, i delete the {$rows.id} just for example.

2. the console.log is used for me to check whether the id is in array or not.
3. I have tried the following codes regarding arrays, but the id’s are not in array.

let ids=[]
$(document).ready(function(){
    $('.js-checkbox').change (function() {
        if ($(this).attr('id') === 'chkAll'){
            if ($(this).prop('checked') === true){
                $('.single-row-checkbox').prop('checked', true);
                //ids.push($(this).attr("id")); 
                ids.push('.single-row-checkbox'.id);
                $('#conditional-part').show();
            }else if ($(this).prop('checked') === false){
                $('.single-row-checkbox').prop('checked', false);
                ids.pop($(this).attr("id"));
                //ids.pop(this.id);
                $('#conditional-part').hide();
            }
        } else if ($(this).attr('id') === 'chkT'){
            const checked = $('.single-row-checkbox');
                if (checked.length >= 2) {
                    $('#conditional-part').show();
                    //ids.push(this.id);
                    ids.push($(this).attr("id"));   
                } else {
                    $('#conditional-part').hide();
                    ids.pop($(this).attr("id"));
                }

        }
    });
});

I have achieve to make the selected checkbox into array using this code :

    let arr= [];
    function toggleTick_Change(){   
        var arr = $.map($('.single-row-checkbox:checkbox:checked'),     function(e, i) {
            return +e.value;
        });
        console.log('the checked values are: ' + arr.join(','));
        $('#conditional-part').show();
      
      //bind the event handler to it
          $arr.on('click', function(){
            btnPrintCNT_Click();
        });
    }

    function btnPrintCNT_Click(id){
        console.log('the checked values are: ' + id);   
    }

 #conditional-part{
    display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<span id="conditional-part" >
      <div class="input-group "  role="group" aria-label="..." style="width: 85px; margin-top: 2px; " >
                <span class="input-group-btn">
                        <button id="btnPrintCNT" type="button" class="btn btn-sm btn-primary" style="margin: 2px; width: 100px; margin-left: 20px; float: left;"                        onclick="javascript:btnPrintCNT_Click()">CNT</button>
                </span>
            </div>
    </span>
                
    <input type="checkbox" id="chkT" value="{$rows.id}" style="width: 15px; height: 15px;" class="single-row-checkbox" onchange="toggleTick_Change()" />
    <input type="checkbox" id="chkT" value="{$rows.id}" style="width: 15px; height: 15px;" class="js-checkbox single-row-checkbox" onchange="toggleTick_Change()" />

But now, problem I faced are:

1. How to call the id in array from ticked checkboxes to the button?
2. How do I ticked all checkboxes without ticking it one by one?

Any help is highly appreciated. Thank you.