Q:

Disable button onclick without using disable attribute

I have 3 buttons 'click me', 'disable', 'enable'. Basically when I click on 'click me' it triggers an alert but when I click on 'disable' it should disable the 'click me' button and change the button background colour and similarly, when i click 'enable it should enable 'click me' and change the background colour to original. It should be without using 'disabled' attribute
This GIF will give clear idea of what I want basically : https://gfycat.com/ickygloriousadouri
I tried using pointercancel but it didn't help.

function disableButton() {
  var a = document.getElementById('clickme');
  a.addEventListener("pointercancel", function() {})
}

function enableButton() {
  var b = document.getElementById('clickme');
  b.addEventListener("pointerover", function() {
    b.style.backgroundColor = '#E2343F';
  })
}
<div class="container">
  <button id="clickme">Click Me</button>
  <div class="">
    <button onclick="disableButton()" class="disable">Disable Button</button>
    <button onclick="enableButton()" class="enable">Enable Button</button>
  </div>
</div>

And moreover if I can toggle the ID to change the css values.
It will be very helpful if someone can help me overcome this issue.

A:

One way is by adding and removing event listeners. 

const showAlert = () => alert('Hi');

const addListener = () => {
  const btn = document.querySelector('#clickme');
  clickListener = btn.addEventListener('click', showAlert);
  btn.classList.remove('disabled');
};

document.addEventListener('DOMContentLoaded', () => {
  addListener();
  
});

function disableButton() {
  const btn = document.querySelector('#clickme'); 
  document.querySelector('#clickme').removeEventListener('click', showAlert);
  btn.classList.add('disabled');
}

function enableButton() {
  addListener();
}
button {
  cursor: pointer;
}

#clickme {
  background-color: #E2343F;
}

#clickme.disabled {
  cursor: auto;
  background-color: grey;
}
<div class="container">
  <button id="clickme">Click Me</button>
  <div class="">
    <button onclick="disableButton()" class="disable">Disable Button</button>
    <button onclick="enableButton()" class="enable">Enable Button</button>
  </div>
</div>

