Now you need to list internal names in the Extra Fields property of Training Course lookup, like this:
Once done, update the below code (read my comments) and add it to the JavaScript editor:
//all code that you want to be executed when the form is loaded
// or when user fill out the form must be inside spRendered() function
fd.spRendered(function() {
//function to populate Course Details
function populateCourseDetails() {
//Replace CourseLocation, CourseStartDate, and TrainingCourse with internal names of the fields on the form, see the screenshot below
//As I understand, the Training Course lookup is a control; if it is a SharePoint field, replace control with field
//add similar lines for other fields
fd.field('CourseLocation').value = fd.control('TrainingCourse').value.Locationofcourse;
fd.field('CourseStartDate').value = fd.control('TrainingCourse').value.Coursedate;
}
//call the function to populate Course Details when lookup value changes
fd.control('TrainingCourse').$on('change', populateCourseDetails);
//call the function to populate Course Details when opening the form
//if you don't need to populate details on form load, delete this lines
fd.control('TrainingCourse').ready().then(function(control) {
populateCourseDetails();
});
});
If you've done it all and it still doesn't work, please share the code and the screenshot of the errors from the browser's console(F12):