JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<tr th:each="m : ${markWiseResultModel}">
                                                <td th:text="${m.id}" align="center"></td>
                                                <td class="topicTD"><input type="hidden" class="topicId" th:value="${m.topic.id}"/><div th:text="${m.topic.name}" align="center"></div></td>

                                                <td data-toggle="modal" style="background:#b8d1f3;"><div class="correctAttempt" th:text="${m.correctAttemptCount}" align="center" ></div></td>
                                                <td th:text="${m.correctAttemptPercent}" align="center" style="background:#99FF99;"></td>

                                                <td th:text="${m.wrongAttemptCount}" align="center" style="background:#b8d1f3;"></td>
                                                <td th:text="${m.wrongAttemptPercent}" align="center" style="background:#99FF99;"></td>

                                                <td th:text="${m.correctTotalCount}" align="center" style="background:#b8d1f3;"></td>
                                                <td th:text="${m.correctTotalPercent}" align="center" style="background:#99FF99;"></td>

                                                <td th:text="${m.wrongTotalCount}" align="center" style="background:#b8d1f3;"></td>
                                                <td th:text="${m.wrongTotalPercent}" align="center" style="background:#99FF99;"></td>

        </tr>

JavaScript

$(document).ready(function(){
      $('.correctAttempt').click(function(){
        var id=  $(this).parent().prev('.topicTD').find(".topicId").val();
        alert(id);
        $('#correctOutOfAttempt').modal('show');
      });
    });