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:<div class=row>    <div id=movie_list class=movie_sec-1 pull-left>        <h6><a href=Javascript:void(0); id=cars_hb>cars.com: be honest</a></h6>        <h6><a href=Javascript:void(0); id=cars_t>cars.com: tag</a></h6>    </div></div>HTML for video inclusion:<div id=kz-video style=display: none;></div>External HTML file that is being loaded via $.get() (file name is cars_bh.html):<div class=video-info>    <h1>Video</h1>    <h4>Now Playing</h4>    <h4>cars.com: be honest</h4></div>    <!-- Video --><video id=kz-player width=100% height=100% controls preload>    <source src=vid/CarscomBeHonest.mp4  type='video/mp4;'>    <source src=vid/CarscomBeHonest.webmhd.webm type='video/webm;'>    <source src=vid/CarscomBeHonest.oggtheora.ogv  type='video/ogg;'></video>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);});}
Loading content from external HTML files
javascript;beginner;jquery;html;ajax