Move selected checkboxes from one div to another. If unselect from the other div, it should reflect in the initial div

In one div i have populated the required check boxes.

Also i have managed to store the selected checkboxes to an object.

I wanted to know how to display this object (checkboxes) in another div. Also if i unselect from the other div it should also reflect in the initial div (two way binding). The below code is used to populate the selected checkboxes.

selectedUsers(usrbysite: any, event: any) { //getting values of selected check boxes
    var index = this.checkeduserslist.indexOf(usrbysite);
    if (event.target.checked) {
        if (index === -1) {
            this.checkeduserslist.push(usrbysite);
            console.log('added', usrbysite);
        }
    }
    else {
        if (index !== -1) {
            this.checkeduserslist.splice(index, 1);
            console.log('removed', usrbysite);
        }
    }
    console.log('CHECKEDUSERSLIST :', this.checkeduserslist);
}

The below code is the initially populated div:

<div style="width:100%; height:120px; overflow-x: auto;">
<div *ngFor="let usersbysite of usersbysite" style="display:inline">
      <input type="checkbox"
          name="usersbysite"
          value="usersbysite.user"
          (change)="selectedUsers(usersbysite, $event)" />
           
</div></div>

I want to populate in another div the object named selecteduserlist