Basically, I'm attempting to recursively read the dom tree backwards to generate a path. The reading of the dom starts with a clicked item and goes up to the parent, collects a attribute value and carries on upward following strict naming conventions until there aren't any more parents. I am having trouble figuring it out but feel I am on a good path. I would like to learn as much conceptually as I can. Thanks for any feedback. **[Here's a JsFiddle](http://jsfiddle.net/yQE5c/)**

I would like the result of a click, however many levels deep, to result in a generated path almost like breadcrumbs. The problem is I can't seem to format the string and output it in the right sequence. 

Desired output: /books/1/chapters/1/pages/1

**HTML**

```
    <div class="list-group" data-type="books">

        <a href="#" class="book list-group-item" data-id="1">Book 1</a>

        <div class="list-group" data-type="chapters">

            <a href="#" class="chapter list-group-item" data-id="1">Chapter 1</a>

            <div class="list-group" data-type="pages">
                <a href="#" class="page list-group-item" data-id="1">Page 1</a>
                <a href="#" class="page list-group-item" data-id="2">Page 2</a>
                <a href="#" class="page list-group-item" data-id="3">Page 3</a>
            </div>

        </div>

    </div>

```

**JQUERY**

```
$(document).on('click','.list-group-item', function(e){
    e.stopPropagation();
    path = getDomData($(this)); // books/1/chapter/2/page/1
});

function getDomData(activeElement){
    var activeElementId = activeElement.data('id'); 
    var activeElementParent = activeElement.closest('.list-group');
    var activeElementParentType = activeElementParent.data('type');
    var activeElementParentParent = activeElementParent.parent('.list-group-item');
    result = activeElementParentType +'/'+ activeElementId +'/';
    if(activeElementParentParent.length > 0){
        getDomData(activeElementParentParent);
    }
    return result;
}

```