JSFiddle - React, Tailwind, and code Playground

by neelesh sahu

HTML

<div class="form-elements">
  <input type="image" name="d5" class="d5" src="https://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="https://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="https://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="https://anitur.streamprovider.net/images/otel-filtre/d2.png" />
<input type="submit" name="d1"  class="d1" />

</div>

CSS

.d1 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
  border: 0;
  display: inline;
  height: 32px;
  width: 32px;
}

.d1_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);
  border: 0;
  display: inline;
  height: 32px;
  width: 32px;
}

JavaScript

$(".form-elements input[type='submit']").on("click", function() {
   debugger;
   var el = $(this).attr("class");
  //if(el=="d1"){
  	$(this).toggleClass('d1 d1_pasif');
  //}

  return false;
});