title: Changing Icon on click
body: <p>I'm trying to change the icon when the audio is playing.</p>
  
  <p>So, when the user hovers over the image, a <code>play</code> button will appear. The user will then click the <code>play</code> button and the audio will then begin. I'd like to icon to change to the <code>pause</code> button when the audio is playing, then when the user wants to stop the audio, they will click the <code>pause</code> button and it will return to the <code>play</code> button. I thought my code would work by removing and adding classes, but it doesn't.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var audio = document.getElementById("audio");
  
  function play() {
    icon = $(this).find("i");
    if (audio.paused) {
      audio.play();
      icon.addClass("fa-pause-circle").removeClass("fa-play-circle");
    } else {
      audio.pause();
      icon.addClass("fa-play-circle").removeClass("fa-pause-circle");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#credits-content {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 15px;
    height: 750px;
    width: 80%;
    margin: 0 10% 50px 10%;
  }
  
  #images-services {
    grid-row: span 1;
    grid-column: span 1;
  }
  
  .image-item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;
  }
  
  #coward-image:hover {
      box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.7);
      cursor: pointer;
  }
  
  #coward-image {
      background-image: url("https://i.ytimg.com/vi/xQ0_zWouE8c/maxresdefault.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
      -moz-transition: all .2s ease-in;
      -o-transition: all .2s ease-in;
      -webkit-transition: all .2s ease-in;
      transition: all .2s ease-in;
  }
  
  #coward-play {
      opacity: 0;
      -moz-transition: all .2s ease-in;
      -o-transition: all .2s ease-in;
      -webkit-transition: all .2s ease-in;
      transition: all .2s ease-in;
  }
  
  #coward-image:hover #coward-play{
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="credits"&gt;
    &lt;div id="credits-content"&gt;
      &lt;div id="coward-image" class="image-item images-services"&gt;
        &lt;audio src="songs/memo.m4a" id="audio"&gt;&lt;/audio&gt;
        &lt;i class="far fa-play-circle fa-7x" id="coward-play" onclick="play()"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>