Наследование и общие данные

class FirstClass {
  constructor() {
    this.flag = 'first class';
    this.label = document.querySelector('.class-val');
  }
  updateVal() {
    this.label.textContent = this.flag.toString();
  }
  toggle() {
    this.flag = !this.flag
    this.updateVal();
  }
}

class SecondClass extends FirstClass {
  constructor() {
    super();
    this.updateVal();
  }
}

class ThirdClass extends SecondClass {
  constructor() {
    super();
    this.label = document.querySelector('.class-val-2');
    console.log(this.flag);
    this.updateVal();
  }
  toggle() {
    this.flag = !this.flag;
    this.updateVal();
  }
  updateVal() {
    this.label.textContent = this.flag.toString();
  }
}

const secondClass = new SecondClass();
const thirdClass = new ThirdClass();
const updateBtn1 = document.querySelector('.js-update-val');
const updateBtn2 = document.querySelector('.js-update-val-2');
const toggleBtn1 = document.querySelector('.js-toggle-val');
const toggleBtn2 = document.querySelector('.js-toggle-val-2');

updateBtn1.addEventListener('click', () => {
  secondClass.updateVal();
})
updateBtn2.addEventListener('click', () => {
  thirdClass.updateVal();
})
toggleBtn1.addEventListener('click', () => {
  secondClass.toggle();
})
toggleBtn2.addEventListener('click', () => {
  thirdClass.toggle();
})

.container {
  display: flex;
}

.col {
  width: 50%;
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="col">
    <div class="class-val" data-id="1">Val 1</div>
    <button class="js-update-val" data-id="1">Обновить</button>
    <button class="js-toggle-val" data-id="1">Toggle</button>
  </div>
  <div class="col">
    <div class="class-val-2" data-id="2">Val 2</div>
    <button class="js-update-val-2" data-id="2">Обновить</button>
    <button class="js-toggle-val-2" data-id="2">Toggle</button>
  </div>
</div>