title: jQuery clone and appendTo duplicating wrong content
body: <p>I am trying to have a form of text inputs. All inputs will in an ordered list OL/LI structure.
  There will be a + symbol next to the input that when you click on it, it should create a sub-OL and make a secondary list with another input. If you click it again, it adds another input. The new inputs have + symbols as well and you can do the same thing. I only technically want it to go three deep, but I think I can figure that part out later on, but what I'm really after is how to make this happen.</p>
  
  <p>I have a beginning phase of it, but it's duplicating too much of the LI and I'm not sure what's going on.
  This is what I have.</p>
  
  <pre><code>    $('.add_sub_page').live('click',function(e){
      $("&lt;ol&gt;").append($(this).parent().clone()).insertAfter(this);
      e.preventDefault();
  });
  </code></pre>
  
  <p>I brought this up an IRC chat room and I was provided with this solution, but it has the same issue as my first solution, so I'm not sure if it's easier to work with or not, so I will provide it as well.</p>
  
  <pre><code>    $('.add_sub_page').live('click',function(e){
      var ol = $("ol",this), new_ol = ol.length ? false : true;
  
      ol = new_ol ? $("&lt;ol&gt;") : ol;
  
      ol.append($(this).parent().clone());
  
      if (new_ol) {
          ol.insertAfter(this);
      }
  
      e.preventDefault();
  });
  </code></pre>
  
  <p>And just so you can see what HTML I am working with...</p>
  
  <pre><code>&lt;form id="sitemap" action="" method="post"&gt;
  &lt;ol&gt;
      &lt;li class="page-title"&gt;&lt;label&gt;Page Name: &lt;/label&gt;&lt;input type="text" name="pages[]" value=""&gt;&lt;a class="add_sub_page"&gt;+&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-title"&gt;&lt;label&gt;Page Name: &lt;/label&gt;&lt;input type="text" name="pages[]" value=""&gt;&lt;a class="add_sub_page"&gt;+&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-title"&gt;&lt;label&gt;Page Name: &lt;/label&gt;&lt;input type="text" name="pages[]" value=""&gt;&lt;a class="add_sub_page"&gt;+&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-title"&gt;&lt;label&gt;Page Name: &lt;/label&gt;&lt;input type="text" name="pages[]" value=""&gt;&lt;a class="add_sub_page"&gt;+&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-title"&gt;&lt;label&gt;Page Name: &lt;/label&gt;&lt;input type="text" name="pages[]" value=""&gt;&lt;a class="add_sub_page"&gt;+&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;p&gt;&lt;input type="submit" name="submit_step1" value="Next Step"&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>You can preview the issue at <a href="http://jsbin.com/everu3" rel="nofollow noreferrer">http://jsbin.com/everu3</a> -- click the same Plus (+) sign twice to see the issue.</p>
  
  <p>Thanks for any help you can provide!</p>