How to increment and display different values with different buttons

Question

In this part of the code:

while (resultSet.next()) {
    String pub = resultSet.getString("text_pub");
    if (pub==null) {
        pub = "";
    }
    String photo = resultSet.getString("path_photo");
%>
    <tr bgcolor="#8FBC8F">
        <td><%= pub %></td>
<%
    if (photo!=null) {
%>
        <td><img src="images/<%=photo%>" width="150" height="130"></td>
<%
    }%>
       <script>         
       var a = 1;
            function increase(){

                var textBox = document.getElementById("text");
                textBox.value = a;
                a++;
            }            
        </script>

 <td><button type="button" name="j'aime" onclick="increase()">j'aime</button>
        <input type="text" id="text" width="50"></td>


<%}
%>

I have different publications displayed in a tab in each row I have a like (j'aime) button and each time I click on it a variable is incremented and displyed in a text field in the same row, the problem is that no matter what button I click on it's always the first value of the first row that is incremented.

Answer 1

you can write your javascript code like this -

onclick of the button find the immediate parent tr of the button then find a child input of that tr and then increment value.

in this way you can increment the value of input exactly in same row. I am not comfortable with javascript so i can give you code sample although in jquery i can easily do it, but it won't help.

You can write your increase function like i said