How to select all checkboxes at the same column , Asp.net core 5 mvc

I am working on Asp.net core 5 mvc app, And I have a for loop that creates cards, and inside each card, there is a checkbox, Each row has 4 cards, which means that we have 4 columns. I want to add a checkbox above each column to select all checkboxes on the same column, Considering that all cards are created automatically inside a for loop.

And this is my code :

   <form asp-action="ManagePermissions" method="post">
                <input type="hidden" asp-for="RoleId" />
                <div class="col-lg-12">
                    <div class="row">

                        <div class="col-lg-12">
                            <div class="row">
                                @for (int i = 0; i < Model.RoleCalims.Count; i++)
                                {
                                    <div class="col-lg-3">
                                        <div class="card card-body">
                                            <div class="media">
                                                <div class="form-check form-check-inline">
                                                    <label class="form-check-label">
                                                        <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                                                        <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">
                                                        @Model.RoleCalims[i].DisplayValue.Split('.')[2]
                                                        <br />
                                                        <br />
                                                        @Model.RoleCalims[i].DisplayValue.Split('.')[1]
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>


                    </div>
                </div>


                <ul class="fab-menu fab-menu-fixed fab-menu-bottom-left" data-fab-toggle="click">
                    <li>
                        <a asp-action="Roles" class="fab-menu-btn btn btn-light btn-float rounded-round btn-icon">
                            <i class="fab-icon-open icon-arrow-right13"></i>
                            <i class="fab-icon-close icon-arrow-right13"></i>
                        </a>
                        <button type="submit" class="fab-menu-btn btn bg-blue-400 btn-float rounded-round btn-icon">
                            <i class="fab-icon-open icon-pencil4"></i>
                            <i class="fab-icon-close icon-pencil4"></i>
                        </button>
                    </li>
                </ul>


            </form>