How to assign values to dynamically generated hidden item

How to assign values to dynamically generated hidden item

I have a modal dialog where table rows are generated dynamically on button click.  First column is an autocomplete text box .when user select an item this value must be assigned to the hidden element. The problem is multiple row will have multiple columns. I dont know how to sync with each element which is created on every button click and assign the selected value to hidden item every time

Following is the code of autocomplete box

  1. $('body').on('focus', "#dataTable #pname", function (e) {
  2.             if (!$(this).data("autocomplete")) {
  3.                   $(this).autocomplete({
  4.                     source: function (request, response) {
  5.                         $.ajax({
  6.                             url: "/Purchase/GetProduct",
  7.                             type: "POST",
  8.                             dataType: "json",
  9.                             data: { term: request.term },
  10.                             success: function (data) {
  11.                                 response($.map(data, function (item) {
  12.                                     return {
  13.                                         label: item.ProductName,
  14.                                         value: item.ProductName,
  15.                                         ID: item.ProductID
  16.                                     };
  17.                                 }));
  18.                             }

  20.                         });
  21.                     },

  23.                     select: function (event, ui) {
  24.                         $('#productID').val(ui.item.ID); //here i want to sync 
  25.                     }
  26.                 });
  27.             }
  28.         });