Loading content from external HTML files

I'm using jQuery's .get() method to load content from external HTML files into my main index file. I created 25 different functions, function videoLoad1(), function videoLoad2() etc, for the 25 videos that I'm loading separately when its corresponding link is clicked. The content that is being swapped out in my HTML index file is the video src and video details. I'm new to jQuery and have been trying to find a more practical way of writing the code.

HTML - links for the onclick function:

    
        cars.com: be honest
        cars.com: tag
    

HTML for video inclusion:

External HTML file that is being loaded via $.get() (file name is cars_bh.html):

    Video
    Now Playing
    cars.com: be honest

    

    
    
    

jQuery function:

function videoLoad2() {

$("a#cars_hb").click(function(e) {
e.preventDefault();
e.stopPropagation();
$.get('cars_hb.html', function( data ) {
  $('#kz-video').html( data );
  });
});

//close overlay/hide content
$('.close').click(function (e) {
e.stopPropagation();
$('#kz-player')[0].pause();
$('#kz-video').hide();
$('.close').fadeOut(800);
$('#video_overlay').fadeOut(800);
});
}

When you say


I created 25 different functions for the 25 videos that I'm loading separately when its corresponding link is clicked.

Does that mean you have multiple function videoLoad#() { ?

I think this will help:

$("div#movie_list a").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    id = e.target.id;
    loadVideo(id);
});

function loadVideo(id) {
    file = id + ".html";
    $.get(file, function (data) {
        $('#kz-video').html(data);
    });
});

StackExchange Code Review Q#43096, answer score: 3