Collect all list elements with input of type checkbox

I have dificulty colleting all the elements (seat) when I check the checkbox. The method changeSeatClass(seat) is inside input element, so it cannot see element above, list element (which is a seat). If I place the method inside list element it does collect elements but more then one click will make it take that element twice. I have problem explaining this problem, and I hope you will understand when you loook at the code.

The goal is to collect all seats based on seat class (diffrent color) and to update them.

My html code

<div class="plane">
<div class="cockpit">
</div>
<div class="exit exit-front front">
 <h1>CHOOSE A SEAT</h1>
</div>

<ol class="cabin fuselage">
  <li *ngFor="let seats of seatMatrix" class="row row--1">
    <ol class="seats" type="A">
      <li *ngFor="let seat of seats" class="seat" id="li 
">
        <input type="checkbox" value="" class="seatinput"  id=" 
" (click)="changeSeatClass(seat)"/>
        <label  [for]="seat" id="label" 
class="label">:</label>                
    </li>
  </ol>
 </li>
</ol>

<div class="exit exit-back fuselage">
 <button (click)="setDisable()" class="button-disble" mat-raised- 
button>DISABLE</button>
<button (click)="setEnable()" class="button-enable" mat-raised-button>ENABLE</button>
<button (click)="setEconomy()" class="button-economy" mat-raised-button>ECONOMY</button>
<button (click)="setBussines()" class="button-bussines" mat-raised-button>BUSSINES</button>
<button (click)="setFirst()" class="button-first" mat-raised-button>FIRST</button>
 <br>
</div>

<div>
  <button class="seat-class" (click)="setSeatClass(seatMatrix)" mat-raised- 
button>SHOW SEAT CLASS</button>
  <button class="seat-update" (click)="updateSeatsClasses()" mat-raised-button>UPDATE SEAT CLASS</button>
  <button class="button-close" mat-raised-button mat-dialog-close>CLOSE</button>
</div>

My .ts file

setSeatClass(seatMatrix: Seat[][]) {
for (const seats of seatMatrix) {
  for (const seat of seats) {
    if (seat.seatType.toString() === 'ECONOMY_CLASS') {
      document.getElementById('li' + seat.row + '' + seat.column).style.backgroundColor = '#009688';
    }
    if (seat.seatType.toString() === 'BUSSINES_CLASS') {
      document.getElementById('li' + seat.row + '' + seat.column).style.backgroundColor = 'FFC107';
    }
    if (seat.seatType.toString() === 'FIRST_CLASS') {
      document.getElementById('li' + seat.row + '' + seat.column).style.backgroundColor = '#29B6F6';
    }
  }
 }
}


changeSeatClass(seat: Seat) {
if (this.type === 'ECONOMY_CLASS') {
  document.getElementById('li' + seat.row + '' + seat.column).style.backgroundColor = '#009688';
  seat.seatType = SeatType.ECONOMY_CLASS;
  seat.airplain = this.airplane;
  this.seats.push(seat);
}
if (this.type === 'BUSSINES_CLASS') {
  document.getElementById('li' + seat.row + '' + seat.column).style.backgroundColor = '#FFC107';
  seat.seatType = SeatType.BUSINESS_CLASS;
  seat.airplain = this.airplane;
  this.seats.push(seat);
}
if (this.type === 'FIRST_CLASS') {
  document.getElementById('li' + seat.row + '' + seat.column).style.backgroundColor = '#29B6F6';
  seat.seatType = SeatType.FIRST_CLASS;
  seat.airplain = this.airplane;
  this.seats.push(seat);
}
if (this.type === 'DISABLED') {
  document.getElementById(seat.row + '' + seat.column).style.backgroundColor = '#ccc';
  document.getElementById(seat.row + '' + seat.column).setAttribute('disabled', 'disabled');
  seat.seatType = SeatType.FIRST_CLASS;
  seat.airplain = this.airplane;
  this.seats.push(seat);
}
if (this.type === 'ENABLED') {
  document.getElementById(seat.row + '' + seat.column).style.backgroundColor = '#ddd';
  document.getElementById(seat.row + '' + seat.column).removeAttribute('disabled');
  seat.seatType = SeatType.FIRST_CLASS;
  seat.airplain = this.airplane;
  this.seats.push(seat);
 }
}

// Will update all seat classes when button is pressed
updateSeatsClasses() {
console.log(this.seats);
this.seatService.updateSeatsClasses(this.seats).subscribe(
  data => {
    this.message = data;
    console.log(this.message);
  }
 );
}

setEconomy() {
 this.type = 'ECONOMY_CLASS';
 console.log(this.type);
}

setBussines() {
 this.type = 'BUSSINES_CLASS';
 console.log(this.type);
}

setFirst() {
 this.type = 'FIRST_CLASS';
 console.log(this.type);
}

setEnable() {
 this.type = 'ENABLED';
 console.log(this.type);
}

setDisable() {
 this.type = 'DISABLED';
 console.log(this.type);
}