$(document).ready(function(){     // 
    $("button").click(function(){ //
      $("p").hide();              // HERE
    });                           //
  });                             //

<p id="text">text</p>

<button type="button" id="button">button</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#button').click(function() {
            $('#text').text("new text");
        });
    });
</script>


<html xmlns:th="http://www.thymeleaf.org">
<table>
    <tr>
        <th>name</th>
        <th>grade</th>
        <th>status</th>
    </tr>
    <tr th:each="student : ${students}">
        <td th:text="${student.name}"></td>
        <td th:text="${student.grade}"></td>
        <td 
            th:text="${student.status} ? 'Passed' : 'Failed'"
            th:style="${student.status} ? 'color: green;' : 'color: red;'"
        ></td>
    </tr>
</table>

pros of thymeleaf: dynamic, secure, easy to maintain, and easier conditional logic with th:if
cons of thymeleaf: it requires a backend such as Spring, and not very scalable, so it would be very inefficient and slow at large sizes