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.
Code:
$(document).ready(function () {
    $(".next").hide();
});

$(document).ready(function () {
    $("#currentMedia").on("ended", function () {
        $(".next").show();
    });
});
Here is the View code:
HTML Code:
<div class="next">
        @Ajax.ActionLink("NEXT >>", "NextPmc", "Home",
        new AjaxOptions
                 {
                     HttpMethod = "GET",
                     InsertionMode = InsertionMode.Replace,
                     UpdateTargetId = "user-component-wrapper",
                 })
    </div>

HTML Code:
<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?