Question

I want to create a form using an unordered list ul must have only two levels which I am not getting in this demo:

http://jsfiddle.net/rathoreahsan/9SCCn/

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.

Current Structure:

<ul>
    <li><input type="text" />
        <ul>
            <li><input type="text" /></li> // New added sub list
                <ul> //It should'nt be like this when added more 
                    <li><input type="text" /></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

The structure should be like this:

<ul>
    <li><input type="text" />
        <ul>
            <li><input type="text" /></li> // New added sub list
            <li><input type="text" /></li> //It should be like this when added more
        </ul>
    </li>
</ul>

Edited
Finally got the solution See Workin Demo: http://jsfiddle.net/rathoreahsan/2hwLp/

Answer 1

JQUERY

$.fn.exists = function(){ return this.length>0; }    
function dBtnClick(val){
    if( $('#duties li#' + val + ' ul.sublists').exists() ) 
    {
       $('#duties li#' + val + ' ul.sublists').append('<li><input type="text" /></li>')
    } 

   else if( !$('#duties li#' + val + ' ul.sublists').exists() ) 
   {
     $("#duties li#" + val).append('<ul class="sublists"><li><input type="text" /></li></ul>')
   }
}


var dutiesListID = $('#duties li#0').attr('id');
var d_cur_no = parseInt(dutiesListID);

$('#dr').click(function(){
    d_cur_no++;
    $('#duties').append('<li id="' + d_cur_no + '"><input type="text" />&nbsp;&nbsp;<a href="javascript:void(0)" onclick="dBtnClick(' + d_cur_no + ');">Add Sub List Item</a></li>');
});

HTML:

<h3>Duties and Responsibilities:</h3>
<ul id="duties">
    <li id="0"><input type="text" />&nbsp;&nbsp;<a href="javascript:void(0)" class="dbtn" onclick="dBtnClick(0)">Add Sub List Item</a></li>
</ul>
<span class="controls">
    <a href="javascript:void(0)" id="dr">Add List Item</a>
</span>

DEMO:
http://jsfiddle.net/rathoreahsan/2hwLp/