Cacher is the code snippet organizer for pro developers

https://codepen.io/olam/pen/zcqea
Add pulse effect to image class, remove all others

<!-- DAY  -->
<div class="sun-container">
    <div class="selected-mode menu-mode__sun" data-mode="day">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/sun_glow.png">
    </div>
</div>

<!-- NIGHT -->
<div class="moon-container">
    <div class="selected-mode menu-mode__moon" data-mode="night">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/moon.png">
    </div>
</div>


<script>
  
    function addPulse() {
        console.log('clicked addPulse') ;
        jQuery('.selected-mode img').click( function() {
            jQuery(".selected-mode img").removeClass('pulse');
            jQuery(this).addClass('pulse');
        } ) ;
    }

</script>

<style>
  
.pulse {
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
  
</style>