Help Loading Text String With Div

I have this code which loads 10 divs from an external file into the main file. There's also a next / previous function to skip back and fourth between the divs.

Demo:

http://goo.gl/RFBN2E

What's the best way to load a text string along side the external divs into a different part of the main file?

How it works at the moment

<!-- External File Divs  -->
<div id="div1">
   <h1>DIV 1</h1>
</div>

<!--Main File  -->
<div id="projects">
 <!-- The above div1 will be loaded here -->
</div>

I need to add

 <!-- External File Divs  -->
<div id="div1">
   <h1>DIV 1</h1>
   <p class="title">This is a title</p>
</div>

 <!--Main File  -->
<div id="projects">
 <!-- The existing div is loaded into here, so the above div1 will be loaded here -->
</div>
<div id="title">
 <!--I need the title from the div to be loaded just underneith in this seperate div -->
</div>

I was thinking of using something like this to simply clone the text from one into the other.

$('projects.html .title').html($('index.html #title').html());

But I couldn't quite work it out with there being seperate files.

Pseudo code of what I'm after to help explain

$(".load").on('click', function () {
    var $projects = $("#projects"),
        id = $(this).data('id');
    $projects.html("").data('id', id);
    $("#loading").show();
    $projects.load("projects.html #div" + id, function () {
        $("#projects").show();
        $("#title").show();
        $("#loading").hide();

        // copy p.title from projects.html into div#title index.html

    })
});