Specific HTML Elements On Reloading Part Of Page

I am trying to do is load new content into a form without resetting the form. I have about 10 checkboxes, once 4 are selected I would like to reload a div in the page to insert four corresponding textareas with the same id as the checkboxes. So for example the checkboxes:

Code:
<div id="page_select">
<input type="checkbox" name="option1" id="option1" value="Home" /> Home
<input type="checkbox" name="option2" id="option2" value="About" /> About</div>

There would be about 10 after 4 are selected than four divs with textareas are loaded onto the page - These textareas have the same id in order for the right ones to load. If your wondering why not just hide the textareas and show when then have been selected by the checkboxes, its because they have a wysiwyg editor attach so it would start to load slow after I add say 10-20 different textareas.

Would this work:
Code:
$(document).ready(function() {
$('#reload_1').click(function() {
//var names = [];
var myScripts = new Array(4)
$('#page_select input:checked').each(function() {
names.push(this).attr("id");
});
$('#content_div').load('external_content.php.html # . + '. myScripts[0]);
$('#content_div').load('external_content.php.html # . + '. myScripts[1]);
$('#content_div').load('external_content.php.html # . + '. myScripts[2]);
$('#content_div').load('external_content.php.html # . + '. myScripts[3]);
If I had all the divs and textareas in external_page.php and load only the ones needed.