Hide or Show Div based on media from Ajax.ActionLink

When an audio or video "currentMedia" starts, I want a div ".next" to be hidden, and when the media is done playing, I want the div ".next" to show.

The trick is, "currentMedia" div containing the audio or video media content is replaced on clicking ".next" using @Ajax.ActionLink, so I am trying to figure out how to get jQuery to recognize it and run the function to show ".next" each time media ends, and hide it when the next media is loaded via Ajax.

Here is some of my jQuery - both of these work fine by themselves.

$(document).ready(function () {$(".next").hide();
});$(document).ready(function () {$("#currentMedia").on("ended", function () {$(".next").show();
    });
});

Here is the View code:

<div class="next">
        @Ajax.ActionLink("NEXT >>", "NextPmc", "Home",
        new AjaxOptions
                 {
                     HttpMethod = "GET",
                     InsertionMode = InsertionMode.Replace,
                     UpdateTargetId = "user-component-wrapper",
                 })</div><img src="@Html.DisplayFor(m => m.ComponentUrl1)" /><audio id="currentMedia" autoplay="autoplay"><source src="@Html.DisplayFor(m => m.ComponentUrl2)" /></audio>

"currentMedia" is in a PartialView.

Any help please?