How to set a click event on the path value of a div and if click on the path value then its display there will be a child in the div

this is the xml file: -

<root>
<child1 entity_id = "1" value= "Asia">
    <child2 entity_id = "2" value = "india">
        <child3 entity_id = "3" value = "Gujarat">
            <child5 entity_id = "5" value ="Rajkot"></child5>
        </child3>
        <child4 entity_id = "4" value = "Rajshthan">
            <child6 entity_id = "6" value = "Ajmer"></child6>
        </child4>
    </child2>
</child1>
</root>

      

        
        
        
      

    

this is my jquery file: -

   data = false;
function loadChild(id) {
    var obj = $("#" + id);

    if(obj.data("loaded") == null) {
        ul = "<d>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            if($(this).data("loaded") == null) {
            $("#path").text($("#path").text()  + obj.text()+ " => ");
        }
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</d>";

        $("#" + id).before(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        //obj.data("loaded", null);
    }
}

 $(document).ready(function() {
     $('#loader').click(function() {
     $(this).hide();
      $.ajax({
             type: "GET",
             url: "try.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                ul = $("<d></d>");
                //loadChild("0");
                $(xml).find('child1').each(function(){
                var value_text = $(this).attr('value');
                var id = $(this).attr('entity_id');
                li=$("<li id='" + id + "'></li>");
                             li.html(value_text);
                             ul.append(li);
                             $(this).unbind('click');
                });
                             ul.appendTo('#firstLevelChild');
    }
         }); //close $.ajax(
     }); //close click(
     $(document).on("click", "li", function(event) {

        event.stopPropagation();
        loadChild($(this).attr("id"), event);
        return false;
 });
 });

      

        
        
        
      

    

this is my html file: -

<div id="path">
</div>
<div id="1">
<span  id='update-target'>Click here to load value</span>
<ol id="0"></ol>
</div>
<div id="firstLevelChild">
<ol id="0"></ol>
</div>

      

        
        
        
      

    

and my output looks something like this:

<div id="firstLevelChild">
    <ul>
        <li id="1" style="display: none;">Asia</li>
        <ul>
            <li id="2" style="display: none;">india</li>
            <ul>
                <li id="3">Gujarat</li>
                <li id="4">Rajshthan</li>
            </ul>
        </ul>
    </ul>
</div>
<div id="path">  Asia => india => Gujarat =></div><br>

      

        
        
        
      

    

If I click on the div path value of any of the similar india then only the asia will scatter on the path
Then india diaplay on another div

as

<div id="path"> Asia => India => Gujarat =>

      

        
        
        
      

    

if I click on India then it displays something like this

<div id="path"> Asia =>
<div id="firstLevelChild">
<d><li id="2"> Inida </li></d>
</div>

      

        
        
        
      

    

something like reverse process
thanks :)