A friend helped me put the following code together, which is made up of a series of repetitive loadContent() functions. I've just shown the first two functions but they're all the same.The code works fine but I'm wondering if anyone could give me a tip as to how I could reduce the bloat in this code and condense the functions somehow. I read somewhere that repetitive code usually means that the code can be simplified or shortened somehow. I'm no expert at jQuery or coding so I'm not sure where to start. I'm assuming that the code could be written a lot better but I might be wrong.function loadContent1()    {            $('#content1').empty();            if(typeof(counterArray[1]) != 'undefined' && counterArray[1] !=     null)clearTimeout(counterArray[1]);            jQuery.ajax({            type: GET,            url: //cgi-bin/mggsn_ssr21.cgi,            beforeSend:function(){                    jQuery('#content1').append('<img class=loading     src=img/loading.gif alt=Loading... />');                    jQuery('#refresh1text').html(<p>Loading...</p>);            }            })            .done(function(data){                    if(typeof(counterArray[1]) != 'undefined' && counterArray[1] != null)clearTimeout(counterArray[1]);                    $('#content1').empty();                    $('#content1').html(data);                    //alert(data.slice(0.100));                    countDownTimeArray[1]=countDownIntervalArray[1];                    countDown(1);            })                    .fail(function(){                    $('#content1').empty();                    jQuery('#content1').html('<h4>failed to load content</h4>' + this.url);            });    }    function loadContent2()    {            $('#content2').empty();            if(typeof(counterArray[2]) != 'undefined' && counterArray[2] != null)clearTimeout(counterArray[2]);            jQuery.ajax({            type: GET,            url: /cgi-bin/mtest2.cgi,            beforeSend:function(){                    jQuery('#content2').append('<img class=loading src=img/loading.gif alt=Loading... />');                    jQuery('#refresh2text').html(<p>Loading...</p>);            }            })            .done(function(data){                    if(typeof(counterArray[2]) != 'undefined' && counterArray[2] != null)clearTimeout(counterArray[2]);                    $('#content2').empty();                    $('#content2').html(data);                    //alert(data.slice(0.100));                    countDownTimeArray[1]=countDownIntervalArray[1];                    countDown(2);            })                    .fail(function(){                    $('#content2').empty();                    jQuery('#content2').html('<h4>failed to load content</h4>' + this.url);            });    }
Series of repetitive content-loading functions
javascript;jquery
You could simplify like so:For the HTML, you could embed specifics as data-* attributes, which you can fetch in JS later on.<div class=content data-source=//cgi-bin/mggsn_ssr21.cgi data-refreshtext=#refresh1text'>  ...</div><div class=content data-source=/cgi-bin/mtest2.cgi data-refreshtext=#refresh2text'>  ...</div>As for the loading gif, I'm not a fan of <img>. I'm more into making the loading gif a background that's coupled with a class, so that it's easy to add using addClass and remove using removeClass..content.loading{  background-image: url(img/loading.gif);  background-repeat: no-repeat;  background-position: center center;  min-height: 100px;}As for the function, we grab the data-* attributes, and execute the ajax.function loadContent(selector){  var element = $(selector);  var url = element.data('source');  var refreshSelector = element.data('refreshtext');  $.ajax({    type: GET,    url: url,    beforeSend: function () {      // Empty the element and set it to loading      element.empty().addClass('loading');      $(refreshSelector).html(<p>Loading...</p>);    }  }).done(function(data){    element.html(data);    ...  }).fail(function(){    element.html('<h4>failed to load content</h4>' + this.url);    ...  }).complete(function(){    // for all cases, fail or success, remove the gif background    element.removeClass('loading');  });}// use like:loadContent('.content');You may supply any selector as your parameter here, like an ID. Just make sure it has the right data-* attributes to go with it.