javascript - Jquery on click function only works for the first row of data. -

i have table auto-generated data database , created using jquery. created using following tr variable appended main tbody : below code :

var list = " <tr id='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newdate + "</td>\n\                                 <td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >confirm received</button>\n\         <input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\         </td></tr>"; $("#order_no_tbody").append(list); $("#order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {     var order_no = this.value;     alert(order_no); }); 

now have issue on click function, works first row of generated table. how can make onclcick function work entries of onclick function ? below onclcick function relies on tr id confirmed order id.

$("#order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {     var order_no = this.value;     alert(order_no); }); 

try this

$(document.body).on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {     var order_no = this.value;     alert(order_no); }); 

now click event work .cnfrmd_rcvd. currnetly binding click event #order_no_t