Get Row on Click in a loop table

Question

The user clicks on a row then the function will get the productionNumber of the row selected then pass it to the ajax servlet then prints the data from the servlet. the code perfectly works, no erroRs but it can only print the first row or it is only getting the productionNumber of what ever is the first row, even by clicking on the succeeding rows..

How can I get the specific PRODUCTIONnumber clicked, if the id/name are the same?

 $(document).ready(function () {

                    $(".production").on("click", (function () {
                var productionNumber1 = document.getElementById("productionNumber").value;
                    console.log(productionNumber1);
                        $.ajax({
                            url: "ViewConsumptionServletJson",
                            type: 'POST',
                            dataType: "json",
                            data: {
                                productionNumber: productionNumber1
                            },
                            success: function (data) {
                                $('#consumptionReportList tbody tr').remove();
                                $('#consumptionReportList').append('<tr><td>' + data[0].productionNumber + '</td><td>' + data[0].dateMade + '</td></tr>');

                            },
                            error: function (XMLHttpRequest, textStatus, exception) {
                                alert(XMLHttpRequest.responseText);
                                console.log("hello");
                            }
                        });
                    }));
                });
                $(document).ready(function () {
                    $('#view').DataTable({
                        "paging": false,
                        "info": false,
                        "dom": '<"pull-left "f>'
                    });
                });




     <tbody>
          <%
                        for (int i = 0; i < cr.size(); i++) {
                    %>
                        <tr class="hoverable" id="clickable" class="production">
                            <td><input type="text" class="input" name="productionNumber" id="productionNumber" value="<%= cr.get(i).getProductionNumber()%>"/></td>
                            <td><%= cr.get(i).getProductID()%></td>
                            <td><%= cr.get(i).getSizeName()%></td>
                            <td><%= cr.get(i).getDateMade()%></td>
                            <td><%= cr.get(i).getPreparedBy()%></td>
                        </tr>
                          <%
                        }
                    %>
                    </tbody>

Answer 1

ADD: var productionNumber: = $(this).closest("tr").find(".productionNumber").text();

ADD: <td class="productionNumber"><%= cr.get(i).getProductionNumber()%></td>

Working:

$(document).ready(function () {
                    $(".production").on("click", (function () {
                         var productionNumber: = $(this).closest("tr").find(".productionNumber").text();
                        $.ajax({
                            url: "ViewConsumptionServletJson",
                            type: 'POST',
                            dataType: "json",
                            data: {
                                productionNumber: productionNumber:
                            },
                            success: function (data) {
                                $('#consumptionReportList tbody tr').remove();
                                $('#consumptionReportList').append('<tr><td>' + data[0].productionNumber + '</td><td>' + data[0].dateMade + '</td><td>' + data[0].productionNumber + '</td><td>' + data[0].prepared + '</td></tr>');

                            },
                            error: function (XMLHttpRequest, textStatus, exception) {
                                alert(XMLHttpRequest.responseText);
                            }
                        });
                    }));
                });

    <tbody>
                <%
                    for (int i = 0; i < cr.size(); i++) {
                %>
                <tr class="production">
                    <td class="productionNumber"><%= cr.get(i).getProductionNumber()%></td>
                    <td><%= cr.get(i).getProductID()%></td>
                    <td><%= cr.get(i).getSizeName()%></td>
                    <td><%= cr.get(i).getDateMade()%></td>
                    <td><%= cr.get(i).getPreparedBy()%></td>
                </tr>
                <%
                    }
                %>
            </tbody>

Answer 2

The main problem here is that you are looping the tr tag keeping the same id, which is incorrect see http://www.w3.org/TR/WCAG20-TECHS/H93.html.

Try this approach:

for (int i = 0; i < cr.size(); i++) {
  <tr class="hoverable" id="clickable-<%= i %>" class="production">
    <td><input type="text" class="input" name="productionNumber" id="productionNumber-<%= i %>" value="<%= cr.get(i).getProductionNumber()%>"/></td>
    <td><%= cr.get(i).getProductID()%></td>
    <td><%= cr.get(i).getSizeName()%></td>
    <td><%= cr.get(i).getDateMade()%></td>
    <td><%= cr.get(i).getPreparedBy()%></td>
  </tr>
}