jquery - Javascript click event on a dynamically created button inside a loop -

i had @ topics related javascript click event problems inside loop before post here:

javascript - dynamically assign onclick event in loop

how pass object onclick event

setting onclick use current value of variable in loop

javascript infamous loop issue?

i tested suggestions using closures or jquery function on , bind code still doesn't work. here current state of code:

 (var key in hotels) {     if (hotels.hasownproperty(key)) {         (var = 0; < hotels.hotellistresponse.hotellist.hotelsummary.length; i++) {             hotelglobal.push('<li style="font-size:18px;font-weight:bold;">' + '<button id="book-infos" class="btn btn-default" style="background-color:#ffc100;font-weight:bold;float:right;display:inline-block;">more</button><br/><hr/>');              $(document).on( 'click', '#book-infos', function () {                 console.log(hotels.hotellistresponse.hotellist.hotelsummary[i]);             });          }     } }  $('ul[id="hotel-list"]').append(hotelglobal); 

basically, loop through hotels object witch contains information unique hotel, name, address, prices, room pictures , on...then inside loop wanted add button "more" each unique hotel items in hotel-list. when user click on "more", see pop-up informations related clicked hotel list. want know how can affect passed element unique button , make click event working?

i think should more this:

var hotels; $('button').on( 'click', '#book-infos', function () {     var id = this.attr('data-id');     console.log(hotels.hotellistresponse.hotellist.hotelsummary[id]); }); 

...ajax function or whatever give hotels:

hotels = responsedata; (var key in hotels) {     if (hotels.hasownproperty(key)) {         (var = 0; < hotels.hotellistresponse.hotellist.hotelsummary.length; i++) {             hotelglobal.push('<li style="font-size:18px;font-weight:bold;">' + '<button data-id="'+ +'" id="book-infos" class="btn btn-default" style="background-color:#ffc100;font-weight:bold;float:right;display:inline-block;">more</button><br/><hr/>');         }     } }