showing/hiding large blocks of code

Question

I have a form that had a section where it can add multiple owners. I'm trying to have a link add has a large block to appear and have the link to add another large block of code. I also need a link to remove one of the sections of code.

this is what it looks like and what i am trying to duplicate up to 2 more times.

The jQuery I have wrote only toggles the link on and off. I need a link that can clone a portion of the code(shown below) and keep it there until a method requires it to hide.

here is the html

<div id="principalOwner2">
<h4>Owner 3</h4> 
<div id="fol_reg_row">

  <div id="fol_reg_left">
    <label for="principalOwnerName3" class="block label">Name:*</label><br />
    <input name="principalOwnerName3" id="principalOwnerName3" class="fol_reg_textfield" value="[% params.principalOwnerName3 %]" type="text" />
  </div>

  <div id="fol_reg_right">
    <label for="principalOwnerTitle3" class="block label">Title:*</label><br />
    <input name="principalOwnerTitle3" id="principalOwnerTitle3" class="fol_reg_textfield" value="[% params.principalOwnerTitle3 %]" type="text" />
  </div>

</div>

<div id="fol_reg_row">

  <div id="fol_reg_left">
    <label for="principalOwnerEmail3" class="block label">Email:*</label><br />
  <input name="principalOwnerEmail3" id="principalOwnerEmail3" class="fol_reg_textfield" value="[% params.principalOwnerEmail3 %]" type="text" />
  </div>

  <div id="fol_reg_right">
    <label for="principalOwnerGender3" class="block label">Gender:*</label><br />
      <select name="principalOwnerGender3" id="principalOwnerGender3" type="text" class="fpp_select">
      <option selected="selected" value="">Select a Gender</option>
      <option>Male</option>
      <option>Female</option>
    </select>
  </div>

</div>

<div id="fol_reg_row">

  <div id="fol_reg_left">
    <label for="principalOwnerEthnicity3" class="block label">Owner Ethnicity:*</label><br />
      <select name="principalOwnerEthnicity3" id="principalOwnerEthnicity3" type="text" class="fpp_select">
        <option selected="selected" value="">Select an Ethnicity</option>
        <option>African American</option>
        <option>Asian-Indian</option>
        <option>Asian-Pacific</option>
        <option>Hispanic American</option>
      </select>
  </div>

  <div id="fol_reg_right">
    <label for="principalOwnerOwnership3" class="block label">% Ownership:*</label><br />
    <input name="principalOwnerOwnership3" id="principalOwnerOwnership3" class="fol_reg_textfield" value="[% params.principalOwnerOwnership3 %]" type="text" />
  </div>

  </div>
</div>

this is the jquery I've tried

$.fn.addRemoveOwners = function(phrase,count) {
  var i = 2 ;
  var phrase;
  if (i == 2) {
    phrase = 'second';
  } 
  if (i == 3) {
   phrase = 'third'
  }  
  $("#addOwner_p").append('<a href="#" id="add_owner" style="font-size:13px;">Add a '+phrase+' owner</a>');

// shows/removes additional owners 
$("#add_owner").live('click', function(){
   $("#addOwner_p").remove();
   $("#principalOwner2").toggle('slideDown');
   $("#addOwner_p").append('<a href="#" id="add_owner" style="font-size:13px;">Add a '+phrase+' owner</a>');
  $("#mailingAddress").focus();

  i++;
  return false;
 });      
};

How would I write the JS to add and remove such blocks of code ?