显示/隐藏大块代码

Question

我有一个表单，其中有一个部分可以添加多个所有者。我试图让链接添加有一个大块出现，并有链接添加另一个大块代码。我还需要一个链接来删除其中一段代码。

这就是它的样子以及我想要复制多达2次的内容。

我写的jQuery只打开和关闭链接。我需要一个链接，可以克隆代码的一部分（如下所示）并保持在那里，直到方法要求它隐藏。

这里是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>

这是我试过的jquery

$.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;
 });      
};

我如何编写JS来添加和删除这些代码块？