how to get the id value in each row from the append table in JavaScript

Question

Sample:

  var table = "<table class='table'>";
  table += "<thead>";
  table += "<center><h5 style='font-weight:bold;color:red'>Aution Notice 
  Report</h5></center><br>";
  table += "<tr style='font-weight:bold'>";
  table += "<th style='width:95px;'>NO</th>";
  table += "<th style='width:175px;'>PTN DATE</th>";
  table += "<th style='width:150px;'>PTN</th>";
  table += "<th style='width:220px;'>FIRST NAME</th>";
  table += "<th style='width:220px;'>LAST NAME</th>";
  table += "<th style='width:270px;'>ADDRESS</th>";
  table += "</tr>";
  table += "<thead>";
  table += "<tbody>";
  $.each(data, function (index, value) {
  table += "<tr>";
  table += "<td style='width:95px;'>" + _loop + "</td>";
  table += "<td style='width:175px;'>" + value.TransDate + "</td>";
  table += "<td style='width:150px;'><input  id='ptnno' title='click me' 
  type='submit' name='Command' value='" + value.PTN + "'style='width:100px; 
  height:auto; background-color:transparent;color:black'  /></td>";
  table += "<td style='width:220px;'>" + value.CustFirstName + "</td>";
  table += "<td style='width:220px;'>" + value.CustLastName + "</td>";
  table += "<td style='width:270px;'>" + value.CustAdd + "</td>";
  table += "</tr>";
  _loop++;
  });
  table += "</tbody></table>";
  $("#reportdata").html(table);

I want to get the value in this part here:

  table += "<td style='width:150px;'><input  id='ptnno' title='click me' 
  type='submit' name='Command' value='" + value.PTN + "'style='width:100px; 
  height:auto; background-color:transparent;color:black'  /></td>";

---

Here's how I get the value

  $("#reportdata").on('click', '#ptnno', function () {
    ptn = $("#ptnno").val();
    document.getElementById("getdata").click();
  });

The problem is: Only the first row can pass the value of the ID, but I like to get the ID Value in each row. Please can someone help me how to solve this.

Your response is highly appreciated. Thank you.

Answer 1

The problem is ID should be unique. Currently you are using multiple ptnno IDs. You have to use class instead.

On your loop, use ptnno as a class, like:

  table += "<td style='width:150px;'><input  class='ptnno' title='click me' 
  type='submit' name='Command' value='" + value.PTN + "'style='width:100px; 
  height:auto; background-color:transparent;color:black'  /></td>";

And how you get the value:

  $("#reportdata").on('click', '.ptnno', function () {
    var ptn = $(this).val(); /* Use this as selector to get the value of the clicked btn*/
    //......
  });