JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<span class="mid" id="mute">
  <img class="mute_icon" id="mute_on" src="https://www.jquery-az.com/html/images/banana.jpg" height="30" width="30">
  <img class="mute_icon" id="mute_off" src="https://png.icons8.com/search" height="30" width="30">
</span>
<div id="out"></div>

CSS

#mute_button {
  width: 30px;
  height: 30px;
}

.mute_icon {
  margin-bottom: 3px;
}

#mute:not(.muted) > :nth-child(2) {
  display: none;
}

#mute.muted > :nth-child(1) {
  display: none;
}

JavaScript

var mute = document.querySelector("#mute");

  mute.addEventListener("click", function() {
		const muted = mute.classList.toggle('muted')
    out.textContent = String(muted)
  }, false);