On page load, I parse the following json data

```
{
"status": "success",
"code": 200,
"data": [{
    "txtid": "123",     
    "name": "itemA" 
}, {
    "txtid": "456",     
    "name": "itemB" 
}],
"error": ""
}

```

and generate the following HTML page

I have the following DOM structure

```
<div class="col-xs-12 col-sm-9" id="Itemlist">
<div class="row" id="details">
    <div class="col-xs-12">
    <div class="panel panel-default"id="ItemInfo">
        <div class="panel-body">
            <div class="row">
            //some content                                              
                <div class="col-xs-12 col-sm-9" id="ItemContent">
                    <div class="name"></div>
                    <div class="txtid" hidden></div>
                </div>
            </div>
    </div>
    <div class="panel-footer">
    <div class="pull-right">
        <button id="Button1" type="submit" class="btn btn-success" role="button">
            Button1
        </button>
        <button id="Button2" type="submit" class="btn btn-success">Button2
        </button>
        <button id="Button3" type="submit" class="btn btn-success">Button3
        </button>
    </div>                                      
</div>
</div>

```

Basically, I have a **Itemlist** , which contains div **details** (Itemlist can contain multiple details) . When the user clicks on a **Button1** in a particular details div, I want to be able to fetch the corresponding attributes (txtid and name) and do some processing.
In the following \*\*var clickedDOMElement \*\* gives me the DOM element which I click, but I essentially want to go to the parent's sibling's attributes (txtid and name).

```
$(document).ready(function() {

$( "*", document.body ).click(function( event ) {
    event.stopPropagation();
    var domElement = $( this ).get( 0 );
    var clickedDOMElement= domElement.id;
    }
    }

```