javascript - How to get child div contents from multiple parent divs with same id when each of them is clicked -

i have multiple divs same id , need content of child's div when parent div clicked, divs dynamically created. following code explains :

i have php file generate multiple divs same id follows :

<div id="display" style="display: block;"> <div class="display_box" id="display_box" align="left"> <div class="pic"><img src="https://graph.facebook.com/picture"></div> <div class="picname">sahrish rizwan</div> </div>  <div class="display_box" id="display_box" align="left"> <div class="pic"><img src="https://graph.facebook.com/picture"></div>            <div class="picname">sahil devji</div> </div> <div class="display_box" id="display_box" align="left"> <div class="pic"><img src="https://graph.facebook.com/picture"></div> <div class="picname">sahar imtiaz</div> </div> <div class="display_box" id="display_box" align="left"> <div class="pic"><img src="https://graph.facebook.com/picture"></div> <div class="picname">sahil devji</div> </div> </div> 

now need content of each display_box through jquery , can 1 me out ?

try (see fiddle console)

$(document).on('click','#display',function(){     $(this).find('.display_box').each(function(){        console.log($(this).html()) // returns overall content      }); }); 

demo

or

$(document).on('click','.display_box',function(){    console.log($(this).html()) // returns clicked content  }); 

demo