Same function but use different array data I have these two carousels that randomly pick up pictures. [fiddle] Each of them picks up pictures and links from their own different inner array. It works fine as it is, but I was just wondering if there's any part that I can encapsulate/shorten. The only thing I can come up with that doesn't return any error is them sharing the same $(document).ready(function(){ [fiddle].

$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });

$('#carouselu').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });


var theImages = [
                ['img1','url_1'],
                ['img2','url_2'],
                ['img3','url_3'],
                ['img4','url_4'],
                ['img5','url_5'],   ];

var shuffled = [];

while (theImages.length) {
    shuffled.push(theImages.splice(Math.random() * theImages.length, 1)[0]);
}



$(document).ready(function(){

var imgPath = "/pic/"; 
var urlPath = "/url/";

    $("#carousel1 .1").each(function(index){    
        $(this).prepend('&lt;a href="'+imgPath+shuffled[index][1]+'"&gt;&lt;img src="'+urlPath+shuffled[index][0]+'"&gt;&lt;/a&gt;');

    });

});


/* Second rotator */

var theImagesabc = [
                ['imga','url_a'],
                ['imgb','url_b'],
                ['imgc','url_c'],
                ['imgd','url_d'],
                ['imge','url_f']    ];

var shuffledabc = [];

while (theImagesabc.length) {
    shuffledabc.push(theImagesabc.splice(Math.random() * theImagesabc.length, 1)[0]);
}


$(document).ready(function(){

var imgPath = "/pic/"; 
var urlPath = "/url/";

    $("#carouselu .u").each(function(index){    
        $(this).prepend('&lt;a href="'+imgPath+shuffledabc[index][1]+'"&gt;&lt;img src="'+urlPath+shuffledabc[index][0]+'"&gt;&lt;/a&gt;');

    });

});
Beyond the repetition in the JS, you've got some repetition across the HTML and JS; I'd avoid having both the array and the empty divs. If you have more divs than you have images in the array, weird stuff starts happening. There's no reason to manually have to manage both of those "lists" when you can just add divs as necessary.

Here's how I might write it, to include that while avoiding the repetition

function randomizeCarousel(selector, images) {
  var i, l, carousel = $(selector);

  function shuffle(images) {
    var i, shuffled = [];
    while(images.length) {
      i = Math.floor(Math.random() * images.length);
      shuffled = shuffled.concat(images.splice(i, 1));
    }
    return shuffled;
  }

  function addImage(src, href) {
    var container = $("&lt;div&gt;"),
        link      = $("&lt;a&gt;&lt;/a&gt;").attr("href", href).appendTo(container),
        img       = $("&lt;img/&gt;").attr("src", src).appendTo(link);
    carousel.append(container);
  }

  images = shuffle(images.slice(0));
  for(i = 0, l = images.length; i &lt; l; i++) {
    addImage("/pic/" + images[i][0], "/url/" + images[i][1]);
  }

  carousel.jsCarousel({
    onthumbnailclick: function(src) { load(src); },
    autoscroll:       true,
    circular:         true,
    masked:           false,
    itemstodisplay:   3,
    orientation: 'h'
  });
}

$(function () {
  randomizeCarousel("#carousel1", [...]); // add your 1st array here
  randomizeCarousel("#carousel2", [...]); // add your 2nd array here
  // ... etc.
});