Multiple content div loading with ajax/json

Question

I have implemented external content loading using Ajax. And now I would like to add multiple container loading functionality using a Json object code I have.

Could you please help me incorporate the json object code into the Ajax code. My knowledge in coding is very limited :)

Here is the detailed info:

Here is the json object:

var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content', 'wrapper': '__content-wrapper'}] 

$.each(json, function(i, itm) {
$('#'+itm.id).wrap('<div id="' + itm.wrapper + '"></div>');
pageload(itm.id, itm.wrapper);
}

function pageload (id, wrapper) {

}

Here is the Ajax code:

$(document).ready(function() {

    var contentWrapID = '___content-wrapper';

    $('#content').wrap('<div id="' + contentWrapID + '"></div>');

    function showNewContent() {
        $("#" + contentWrapID).slideDown();
        $('#load').fadeOut();   
    }

    function pageload(hash) {
        if(hash) {
            $("#" + contentWrapID).load(hash + " #content",'',function(){
                if($('img:last',this).get(0)) {
                    $('img:last',this).load(function(){
                        showNewContent();
                    });
                } else {
                    showNewContent();
                }

            });
        } else {
            $("#" + contentWrapID).load("index.html #content");
        }
    }
    $.historyInit(pageload);

    $('#topnav li a').click(function(){

        var hash = $(this).attr('href');
        hash = hash.replace(/^.*#/, '');
        $("#" + contentWrapID).slideUp(300,function(){
            $.historyLoad(hash);
        });
        if(!$('#load').get(0)) {
            $('#container').append('<span id="load">LOADING...</span>');
        }
        $('#load').fadeIn('normal');
                                   $('#topnav li a').removeClass('current'); 
                                   $(this).addClass('current'); 
        return false;



    });

});

........................

As far as I understand I have to replace this line:

var contentWrapID = '___content-wrapper';

with the json object:

var json = [{'id': 'content', 'wrapper': '_content-wrapper'},{'id': 'content2', 'wrapper': '_content-wrapper2'}];

But I also have to change the pageload function so that it works with the new variables that are passed:

function pageload (id, wrapper) {

}

I'd also like to add that this is what I'm trying to accomplish in particular:

1. To be able to load content into, (lets call it #div 1) extracted from a corresponding #div in a html page, (lets call it featured.html) with a click on any of the tabs in the 1st navigation menu, (lets call it #topnav).
2. To be able to load content into, (lets call it #div 2) extracted from a corresponding #div in another html page, (lets call it news.html) with a click on any of the tabs in the second navigation menu, (lets call it #vertnav-bar).

P.S Only one div gets loaded for every click. (From what you explained I think this particular detail is important that i mention with regards to the pageload calling function. In other words at no one given point in time will a click be loading data to more than one #div

I'd be very grateful for any help

Best regards Paul