Adding warning when button is disabled

Answer 1

You've got plenty of code here. It's always better to provide a minimal solution. I tried to build a minimal solution for you.

I's CSS only, the Javascript is only for clarification on how it works.

var buttons = document.querySelectorAll(".btn");

document.getElementById("toggle-disabled").addEventListener("click", function(e){
  for(let i = 0; i < buttons.length; i++){
    buttons[i].toggleAttribute("disabled");
  }
});

.btn-disabled-warning {
  display: none;
}

.btn[disabled] + .btn-disabled-warning {
  color: red;
  display: block;
}

<div>
  <button class="btn" disabled>My Button</button>
  <p class="btn-disabled-warning">The button is disabled :-(</p>
<div>
  
<div>
  <button class="btn">My Button</button>
  <p class="btn-disabled-warning">The button is disabled :-(</p>
<div>
  
<button id="toggle-disabled">Toggle disabled</button>