HTML get checkbox element

I’m making a checkbox where every user presses the checkbox, then the contents of the checkbox will appear in the list section :
as shown here

the problem is the checkbox that works is only the first checkbox in the list and every time the user presses the checkbox, the content that shown in the list is only the last data in the database.
here is my code :

@foreach($users as $user)
                                    <ol class="list-group" >
                                            <div class="card">
                                            <li class="list-group-item group-containers">
                                                <div class="row">
                                                <input onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver">
                                                    <div class="col-1 c-avatar mr-3">
                                                        <img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
                                                    </div>
                                                    <div class="col-8">
                                                    <div class="">{{ $user->name }}</div>
                                                    <label for="" class="text-secondary">{{ $user->email }}</label>
                                                    </div>
                                                </div>
                                                </input>
                                            </li>
                                        </div>
                                    </ol>
                                    @endforeach

Here is the code that shows the selected checkbox content :

<ol id="list" class="list-group" style="display:none">
                            <div class="card">
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-1 c-avatar mr-3">
                                            <img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
                                        </div>
                                        <div class="col-8">
                                        <div class="">{{ $user->name }}</div>
                                    </div>
                                </li>
                                </div>
                            </ol>

and here is the javascript code :

<script>
    
function checkBox(){
    // console.log(e)
    var cb = document.getElementById("approver");
    var text = document.getElementById("list");
    if(cb.checked==true){
        text.style.display="block";
    } else {
        text.style.display="none";
    }
}

</script>

any solutions?