title: how to shown an element only when another element has a certain change in class
body: <p>I have three buttons</p>
  <pre><code>&lt;button type=&quot;button&quot; id=&quot;btn-Low&quot; class=&quot;btn btn-success disabled&quot;&gt;Green&lt;/button&gt;
  &lt;button type=&quot;button&quot; id=&quot;btn-Medium&quot; class=&quot;btn btn-warning disabled&quot;&gt;Orange&lt;/button&gt;
  &lt;button type=&quot;button&quot; id=&quot;btn-High&quot; class=&quot;btn btn-danger disabled&quot;&gt;&lt;/button&gt;
  </code></pre>
  <p>I want to show an image for each of them if disabled get removed from there class.
  Here are the images:</p>
  <pre><code>&lt;img src=&quot;assets/media/logos/red.jpg&quot; id=&quot;red&quot; style=&quot;width: 250px; height: 250px; display: none&quot; alt=&quot;&quot; /&gt;
  &lt;img src=&quot;assets/media/logos/green.jpg&quot; id=&quot;green&quot; style=&quot;width: 250px; height: 250px; display: none&quot; alt=&quot;&quot; /&gt;
  &lt;img src=&quot;assets/media/logos/orange.jpg&quot; id=&quot;orange&quot; style=&quot;width: 250px; height: 250px; display: none&quot; alt=&quot;&quot; /&gt;
  </code></pre>
  <p>Here is what i tried:</p>
  <pre><code>&lt;script&gt;
    var delta = document.getElementById(&quot;red&quot;);
    if (document.getElementById('btn-High').disabled === false;) {
      delta.style.display = &quot;block&quot;;
  } else {
  delta.style.display = &quot;none&quot;;
  }
  &lt;/script&gt;
  
  &lt;script&gt;
    var omega = document.getElementById(&quot;green&quot;);
    if (document.getElementById('btn-Low').disabled === false;) {
      omega.style.display = &quot;block&quot;;
  } else {
  omega.style.display = &quot;none&quot;;
  }
  &lt;/script&gt;
  
  &lt;script&gt;
    var alpha = document.getElementById(&quot;orange&quot;);
    if (document.getElementById('btn-Medium').disabled === false;) {
      alpha.style.display = &quot;block&quot;;
  } else {
  alpha.style.display = &quot;none&quot;;
  }
  &lt;/script&gt;
  </code></pre>