How to stop random sounds (voice over) using onclick events in javascript

I'm building and i have a little hiccup. Now I cant seem to stop my random sounds that are played randomly after an event is achieved. Below are the codes

HTML

<li class="tab-item ion-volume-high soundon" title="Sound" onclick="playIt()"></li>

<audio id="audio1"  preload="auto"><source src="sound1.wav"></source></audio>
<audio  id="audio2"  preload="auto"><source src="sound2.wav "></source></audio>
<audio  id="audio3"  preload="auto"><source src="sound3.wav"></source></audio>
<audio  id="audio4"  preload="auto"><source src="sound4.wav "></source></audio> 

below is the javascript

 if (Candy._score == 50) {
$(document).ready(function(){
            $("audio").each(function(){
                    this.volume = 0.9;
            });
    var tid = setInterval(playIt, 5500);
    });

    function playIt() {
            var n = Math.ceil(Math.random() * 4);
            $("#audio"+n).trigger('play');

var sounds = document.getElementById('sounds');
    if (sounds.paused) {
        sounds.play();
        $('.soundon').removeClass('ion-volume-high').addClass('ion-volume-low');

    } else {
        sounds.pause();
        sounds.currentTime = 0
        $('.soundon').addClass('ion-volume-high').removeClass('ion-volume-low');

    }

};