title: Add/Remove unorder lists/sublists (two-level) Jquery
body: <p>I want to create a form using an unordered list <code>ul</code> must have only two levels which I am not getting in this demo:</p>
  
  <p><a href="http://jsfiddle.net/rathoreahsan/9SCCn/" rel="nofollow">http://jsfiddle.net/rathoreahsan/9SCCn/</a> </p>
  
  <p>When I add a sub-list it adds one sub list of parent list (it is fine) but when I add another sub-list it adds a sub-list for newly added sub-list (that i don't want). I want when I add sub-list it only add 1 sub-list of a parent list instead of adding sub-list of newly added sub-lists.</p>
  
  <p>Current Structure: </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;input type="text" /&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;input type="text" /&gt;&lt;/li&gt; // New added sub list
                  &lt;ul&gt; //It should'nt be like this when added more 
                      &lt;li&gt;&lt;input type="text" /&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The structure should be like this: </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;input type="text" /&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;input type="text" /&gt;&lt;/li&gt; // New added sub list
              &lt;li&gt;&lt;input type="text" /&gt;&lt;/li&gt; //It should be like this when added more
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Edited</strong>
  Finally got the solution See Workin Demo: <a href="http://jsfiddle.net/rathoreahsan/2hwLp/" rel="nofollow">http://jsfiddle.net/rathoreahsan/2hwLp/</a></p>