Load content into multiple divs simultaneously

Load content into multiple divs simultaneously

Hi;

I am new to Javascript and Jquery. I am trying to load content of two divs on pageB.html into two divs on pageA.html respectively. The structure of pages are as follow:

pageA.html contains:

<a href="pageB.html">link</a>

<div id="cl1Content">this is where "imgContainer" from pageB.html sholud load in</div>
<div id="cl2Content">this is where "caption" from pageB.html sholud load in</div>

pageB.html contains:

<div id="imgContainer"></div>
<div id="caption"></div>


jQuery Code That I am using:--------------

$('li a').click(function(e) {
            e.preventDefault();
              
            $this = $(this);
               var page = $(this).attr('href');
       
            $('#cl1Content, #cl2Content').fadeOut('slow', function(){
            $('#cl2Content').load(page,'#imgContainer').fadeIn('slow');
            $('#cl1Content').load(page,'#caption').fadeIn('slow')
       
            });





Action:-------------------

when I click on the "link" the following behavior takes place which is not what I want.

"imgContainer" and "caption" both > load into > "cl1Content"
"imgContainer" and "caption" both > load into > "cl2Content"

What I am looking is this behavior:

"imgContainer"> should loads into > "cl2Content"
"caption"> should loads into > "cl1Content"

I appreciate any help.
Thanks