Changing state color of an SVG object in jquery while clicking anywhere on the button (play/pause button)

Question

I have a problem that's bugging me for a couple of hours! I Tough it was a simple thing in the begining!

I have a playlist with 6 sounds, beside each item on that playlist there's a SVG play/pause button (with rollover (white/red)), when we press the button, it should play the song and the button triangle, in the button change color (to red) and stay that color until we click back on it and should change back to white. The thing is, it's that everything works as expected, but it will only work on when I click on the part of the button (the triangle) where the color change.

Here's the HTML:

<ul class="playlist">
      <li>
        <span class="play" id="1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
            <g fill="none">
              <circle cx="16" cy="16" r="16" fill="#000"/>
              <polygon id="play-btn-1" class="play-button" fill="#FFF" points="4.5 0 9 9 0 9" transform="rotate(90 6.5 16.5)"/>
            </g>
          </svg>
        </span>
        <span class="titre-chanson">Sound1</span>
      </li>
      <li>
        <span class="play" id="2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
            <g fill="none">
              <circle cx="16" cy="16" r="16" fill="#000"/>
              <polygon id="play-btn-2" class="play-button" fill="#FFF" points="4.5 0 9 9 0 9" transform="rotate(90 6.5 16.5)"/>
            </g>
          </svg>
        </span>
        <span class="titre-chanson">Sound2</span>
      </li>
      </ul>

      <audio src="http://www.bigsoundbank.com/sounds/ogg/0595.ogg" preload id="trk1" type="audio/ogg"></audio>
    <audio src="http://www.bigsoundbank.com/sounds/ogg/0595.ogg" id="trk2" type="audio/ogg"></audio>

Here's the CSS:

    .playlist {
  width: 80%;
  list-style: none;
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.1rem;
  word-spacing: 0.3rem;
  text-transform: uppercase;
  margin: 45px;
}

.playlist li{
  height: 30px;
}

.play {
  float: left;
  margin: 3px 10px 0 0;
}


.play-button {
  fill: #fff;
}
svg:hover .play-button {
  fill: #a9021a;
}
.play-button.active {
  fill:#a9021a;
}

.titre-chanson {
float: left;
margin-top: 8px;
}

.titre-trk-plain {
  float: left;
  margin: 8px 0 0 34px;
}

And finally, the javascript (jquery):

$('.play').click(function () {
    var $this = $(this)
    var audioId = 'trk' + $(this).attr('id')
    $this.toggleClass('active')
    chgStatePlay()
    // $('#play-button' + audioId).toggleClass('active');
    if ($this.hasClass('active')) {
      $('#' + audioId).trigger('play')
    } else {
      $('#' + audioId).trigger('pause')
    }
  })

  function chgStatePlay () {
    $('svg .play-button').click(function () {
      var $this = $(this)
      $this.toggleClass('active')
    })
  }

You can find a working exemple here: JS Fiddle

I know that the root of my problem is that the event selector "$('.play').click..." will make the audio part work, and toggle a css class "active" but I need to toogle a second class in the SVG. I don't know how to get to that class from the event "$('.play').click...". I tried to directly select it in the click function, but it will change all the button instead of the one that has been clicked.

If someone has a solution I will be very happy to know. I'm still a beginner in javascript. So I'm here to learn :)

Edit: With the jquery script I did, I don't have problem accessing the SVG DOM, maybe a little. the function chgStatePlay() will only works if I hit the play symbol, which is very small and difficult to hit, in the middle of the black circle. I tried to access the SVG DOM directly by inserting this following code in the main script (not the function): $('.play-button').toggleClass('active'), but it changed all the button instead of the one I clicked on. What I tried to achieve it's to toggle the class of .play-button (add 'active') in the SVG from the event $('.play')click() (the .play class is the whole image not just the triangle).

Thanks