I have a HTML someting like this. In this html, number of tr is not certain. It could be 1 or 1000. Every row has a button has a name, "apply". And i have a jquery to handle click operation but in this case, jquery recognizes only first row's button. But i dont know how to do.

<tr id="jobs" th:each="job : ${job}">

                    <p id="jobID" th:text="${job.jobId}" style="display: none"></p>
                    <div class="col-md-3" id="JobTitle">
                        <span class="label label-default">Job Title</span>
                        <td th:text="${job.jobTitle}" />
                    </div>

                    <div class="col-md-3" id="jobDescription">
                        <span class="label label-primary">Job Description</span>
                        <td th:text="${job.jobDescription}" />
                    </div>

                    <div class="col-md-3" id="numberOfPersonToHire">
                        <span class="label label-success">Number Of Candidates</span>
                        <td th:text="${job.numberOfPersonToHire}" />
                    </div>

                    <div class="col-md-2" id="lastApplicationDate">
                        <span class="label label-info">Last Date</span>
                        <td th:text="${job.lastApplicationDate}" />
                    </div>

                    <button id="apply" type="submit" class="btn btn-xs"aria-label="Left Align">
                        <img th:src="@{/images/apply.png}" height="20" width="auto" />
                        Apply
                    </button>
                </tr>

JS

$("#apply").click(function(e){
        e.preventDefault();
        e.stopPropagation();
        debugger        
        var jobId = $('#jobID').text();
        document.location.href = "/admin";
    });