Javascript

[CaptainM]

I've gotten totally lost in the weeds in my javascript. I would like for when the mouse goes over the exercise name, the details of the exercise are exposed, much like Harish's Peoplebook. However, while all my code is executing without error, I can't get anything to show in the browser when I mouse over the individual exercises. I would really like to talk someone about this before leaving tonight so that I can still work this evening. Below is my js file:

$(function() {
console.log("loaded, bro");
fetchAndRenderExercises();
$("#exercises").on("mouseover", ".exercise-name", showDetails);

});

function fetchAndRenderExercises() {
$.get("/exercises").done(function(data) {
    data.forEach(renderExercise);
});

}

function renderExercise(exerciseObject) {
var exerciseID = exerciseObject.id;
var exerciseName = exerciseObject.name;
var exerciseDiff = exerciseObject.difficulty;
var exerciseRep = exerciseObject.reps;
var exerciseSet = exerciseObject.sets;
var exerciseRequire = exerciseObject.requirements;
var exerciseBodyPart = exerciseObject.bodypart;
var exerciseDescription = exerciseObject.description;
var exercisePound = exerciseObject.pounds;

var exerciseDiv = $("<div>").addClass("exercise exercise-id").attr("id", exerciseID);
var exerciseDisplay = $("<p>").text(exerciseName).addClass("exercise exercise-name");
var exerciseDifficulty = $("<span>").addClass("basic-detail").addClass("difficulty").attr("data-id", exerciseDiff);
var exerciseReps = $("<span>").addClass("basic-detail").addClass("reps").attr("data-id", exerciseRep);
var exerciseSets = $("<span>").addClass("basic-detail").addClass("sets").attr("data-id", exerciseSet);
var exerciseRequirements = $("<span>").addClass("basic-detail").addClass("requirements").attr("data-id", exerciseRequire);
var exerciseBodyParts = $("<span>").addClass("basic-detail").addClass("bodypart").attr("data-id", exerciseBodyPart);
var exerciseDescriptions = $("<span>").addClass("basic-detail").addClass("description").attr("data-id", exerciseDescription);
var exercisePounds = $("<span>").addClass("basic-detail").addClass("pounds").attr("data-id", exercisePound);
exerciseDiv.append(exerciseDisplay).append(exerciseDifficulty).append(exerciseReps).append(exerciseSets).append(exerciseRequirements).append(exerciseBodyParts).append(exerciseDescriptions).append(exercisePounds);
$('#exercises').prepend(exerciseDiv);

}

function showDetails() {
console.log(this);
var exerciseID = $(this).parent().attr("id");
fetchExercise(exerciseID);
};

function fetchExercise(exerciseID) {
$.ajax("/exercises/" + exerciseID + ".json").done(function() {
    console.log("hi!");
});
};