Load Text String Into Seperate Div

[Mr.Pink]

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

(Click load content to load the content via ajax, then the next / previous buttons will skip between the divs)

My question, what's the best way to load a text string in the divs into a different part of the main file? Here's an example.

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 p.title').html($('index.html div#title').html());

But I couldn't quite work it out and I'm just a little bit lost on how to go about doing it.

Here's some pseudo code included into the load function to help explain further.

$(".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

    })
});