Adding a download link to native Wordpress playlist

I need a link to enable downloading of each audio file item within the native wordpress playlist.

I've used the script from this thread >> Download button for wp audio player

but there isn't the ability to ask questions of the poster. I've just used the bottom script by Dave Romsey and placed it in a custom script plugin. Have I missed something by doing this? This produces a download icon on the right of the playlist item, has a hover state, but simply starts the playlist item when clicked.

script
/**
 * Our custom playlist template for mp3 download`.
 */
function wpse_141767_wp_underscore_playlist_templates() {
?
script type="text/html" id="tmpl-wp-playlist-current-item"
    # if ( data.image ) { #
    img src="{{ data.thumb.src }}"/
    # } #
    div class="wp-playlist-caption"
            span class="wp-playlist-item-meta wp-playlist-item-title"#8220;{{ data.title }}#8221;/span
            # if ( data.meta.album ) { #span class="wp-playlist-item-meta wp-playlist-item-album"{{ data.meta.album }}/span# } #
            # if ( data.meta.artist ) { #span class="wp-playlist-item-meta wp-playlist-item-artist"{{ data.meta.artist }}/span# } #
    /div
/script
script type="text/html" id="tmpl-wp-playlist-item"
    div class="wp-playlist-item"
            a class="wp-playlist-caption" href="{{ data.src }}"
                    {{ data.index ? ( data.index + '. ' ) : '' }}
                    # if ( data.caption ) { #
                            {{ data.caption }}
                    # } else { #
                            span class="wp-playlist-item-title"#8220;{{{ data.title }}}#8221;/span
                            # if ( data.artists  data.meta.artist ) { #
                            span class="wp-playlist-item-artist" mdash; {{ data.meta.artist }}/span
                            # } #
                    # } #
            /a
            # if ( data.meta.length_formatted ) { #
div class="wp-playlist-item-length"span
        a href="{{ data.src }}"i class="fa fa-download" title="Download" aria-hidden="true"/i/a
    /span{{ data.meta.length_formatted }}/div
            # } #             
    /div
/script
?php
}
/script

but, as mentioned (and within that thread), the icon doesn't start a download, it simply activates the play function of the playlist item. I've tried moving the download icon section below the div (I'd still like it in it's original position if possible) to hopefully move the span outside of the div to remove it from the play attribute that everything inside that div obviously activates but this just opens the mp3 file in a new browser window:

div class="wp-playlist-item-length"span
        a href="{{ data.src }}"i class="fa fa-download" title="download" aria-hidden="true"/i/a
     /span{{ data.meta.length_formatted }}/div
        # } #             
    /div
    span
    a href="{{ data.src }}"i class="fa fa-download" title="download" aria-hidden="true"/i/a
    /span

Is there a way to have the originally located download icon actually open a 'save' dialogue for each mp3? I'm no coder so not sure if this was what was supposed to happen when clicking the icon in the previous thread as there is no working example?

I'm very grateful for the other thread as it's almost there but just need the icon to actually activate.

Any help gratefully received. Thanks in advance : )

edit: I found this earlier which apparently stops the parent event being triggered by the child. I've tried to incorporate this into the above code, at the top, but it doesn't work (no surprise there since I don't really understand the code) However, this still wouldn't give me a 'save as' dialogue but would stop the download button playing the clip.

$("#parentEle").click( function(e) {
alert('parent ele clicked');
});
$("#parentEle").children().click( function(e) {
//this prevent the event from bubbling to any event higher than the direct children
e.stopPropagation();
});