I need to pass the object's id to the controller when a button is clicked. Right now, it only works for the first item in the list and not for others. How can I fix this issue?
$(document).ready(function () {
$("#showTweet").click(function () {
var tweetId = $(this).parent().attr("id");
$.ajax({
type: "GET",
dataType: "json",
url: "http://localhost:8020/showTweet?tweetId=" + tweetId,
success: function (result) {
var description = result.description;
$("#tweetText").text(description);
},
});
});
});
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>User</th>
<th>Creation Date</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr th:each="unapprovedTweets: ${unapprovedTweets}">
<td th:text="${unapprovedTweets.creative}"></td>
<td th:text="${unapprovedTweets.create_date}"></td>
<td>
<div th:id="${unapprovedTweets.id}" style="width: 0px; height: 0px; display: contents;">
<a id="showTweet" class="btn btn-warning">View Tweet</a>
</div> <a th:href="@{'/sendTweet/' + ${unapprovedTweets.id}}" class="btn btn-primary" style="width: 90px; margin-left: 5px;">Approve</a>
<a th:href="@{'/refuseTweet/' + ${unapprovedTweets.id}}" class="btn btn-danger" style="width: 90px; margin-left: 5px;">Reject</a>
</td>
</tr>
</tbody>
</table>