Play Soundcloud sound by hovering over Soundcloud link not the Iframe

Question

Context: Below are the links for Soundcloud music with their corresponding Iframe(HTML Code) and code for Soundcloud widget API(Javascript Code). Soundcloud Links and Iframes for each one:
1.

<a id="0" href="https://soundcloud.com/leagueoflegends/kda-drum-go-dum">Drum Go Dum</a>
<br />
<iframe class="clickme" id="sc_0" width="300" height="200" allow="autoplay" scrolling="no"
        src="https://w.soundcloud.com/player/?url=https://soundcloud.com/leagueoflegends/kda-drum-go-dum&show_artwork=true"
        frameborder="0" style="display: 100px">
</iframe>

<a  id="1" href="https://soundcloud.com/leagueoflegends/kda-more-feat-madison-beer-gi-dle-lexie-liu-jaira-burns-seraphine">More</a>
<br />
<iframe class="clickme"id="sc_1" width="300" height="200" allow="autoplay" scrolling="no"
        src="https://w.soundcloud.com/player/?url=https://soundcloud.com/leagueoflegends/kda-more-feat-madison-beer-gi-dle-lexie-liu-jaira-burns-seraphine&show_artwork=true"
        frameborder="0" style="display: 100px">
</iframe>

Soundcloud widget API(Javascript Code):

<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script>

    // create widget object to store all the sound widgets, each iframe key will have a separate SC Widget instance
    const widget = {}

    // Play function to play the current sound, id is the iframe id for hovered widget
    function play(target, id) {

        // if the widget is not haven't played yet, then create a new widget instance
        // and add it to widget object
        if (!widget[id]) widget[id] = new SC.Widget(target)


        widget[id].bind(SC.Widget.Events.READY, function () {
            widget[id].bind(SC.Widget.Events.PLAY, function () {
                // get information about currently playing sound
                console.log('sound is beginning to play');

            });
            // get current level of volume
            widget[id].getVolume(function (volume) {
                console.log('current volume value is ' + volume);
            });
            // set new volume level
            widget[id].setVolume(50);
            // get the value of the current position
            widget[id].bind(SC.Widget.Events.FINISH, function () {
                // get information about currently playing sound
                console.log('replaying sound');
                widget[id].seekTo(0);
                widget[id].play();
            });
        });
        widget[id].play()
    }


    // stop the player from which mouseleave has happened
    function stop(target, id) {
        if (widget[id])
            widget[id].pause()
    }

    $(document).ready(function () {
        console.log("ready!");
        $(".clickme").mouseenter(function (e) {
            console.log('start ');
            // Play the current hovered
            play(e.currentTarget, e.currentTarget.id)
        });

        $(".clickme").mouseleave(function (e) {
            console.log('finish ');
            // Stop currently playing on mouse leave
            stop(e.currentTarget, e.currentTarget.id)
        });

    }());

</script>

Problem: The javascript code above plays the soundcloud sound when you hover over the iframe only. I need help with modifying the code so that when you hover on the link in tags <a></a> it will play the sound instead of hovering over the iframe.

What I did to try to solve the problem: I tried to create a string that represents the various ID's of multiple iframes but I could not do it successfully and it gave me the error that SC.Widget function should be given either iframe element or a string specifying id attribute of iframe element.