Looping through table rows in MVC view and getting the multiple checkbox values posted to controller

I'm createing a role management page in MVC app . The page contain a table respective roles of the members. Following is example the structure of table

Name|ReadRole|WriteRole|R/WRole ABC checkbox checkbox checkbox

Now there maybe n number of users in this table there will be a admin to manage the role access. So when admin perform any changes I need all the values of the respective users to be updated in DB . So I have written an javascript to read these values but the foreach loop is not working and I'm not able to post the data to controller. I'm new to JS so not sure how i can build the list and pass it to controller. The code written foreach is not working even for one record.

Can you please help me how pass the all data(UserName and there respective Roles) from the view view to the controller. Controller method is expecting List of UserRoles in the parameter from the View.

UserRole class:

public class UserRoles
    {
        public string UserLoginName { get; set; }
        public bool CanRead{ get; set; }
        public bool CanWrite{ get; set; }
        public bool CanReadWrite{ get; set; }            
    }

View code:

@model Models.UserRolesModel
<div>
    <table class="table-sm" id="table_user">
        <thead class="thead-light">
            <tr class="text-center">
                <th>Name</th>
                <th>Read</th>
                <th>Write</th>
                <th>Read-Write</th>
            </tr>
        </thead>
        <tbody>
             @foreach (var userRole in Model.UserRoles)
                {
                    <tr>
                        <td id="UserLoginName">@userRole.UserLoginName</td>
                        <td>
                            @Html.CheckBox("CanRead", userRole.CanRead)
                        </td>
                        <td>
                            @Html.CheckBox("CanWrite", userRole.CanWrite)
                        </td>
                        <td>
                            @Html.CheckBox("CanReadWrite", userRole.CanReadWrite)
                        </td>                        
                    </tr>
                }
        </tbody>
    </table>
</div>

<script>
    function UpdateRoles() {

        $('#table_user tbody tr').each(function () {

            var logName = document.getElementById("UserLoginName").innerHTML.trim();
            var CanRead = document.getElementById('CanRead').checked;
            var CanWrite = document.getElementById('CanWrite').checked;
            var CanReadWrite = document.getElementById('CanReadWrite').checked;
                        
            var sectionPermissions = [logName ,CanRead ,CanWrite ,CanReadWrite ];            

        });

        var postData = {
            List<UserRoles>:sectionPermissions 
        };

        $.post("/UserRoles/UpdateUserRoles", postData, function (response) {
            $("#UserRoleModalPlaceholder").html(response);
        });
    }
</script>