JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Example 1</h3>

<table border="1">
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>
        <button onclick="collapseDetailsTransaction()" id="collapse-button">klik</button>
      </td>
    </tr>
    <tr id="details"><td colspan="3">a</td></tr>
</table>

JavaScript

const collapseDetailsTransaction = () => {
    const details = document.getElementById(`details`);
    const caret = document.getElementById(`collapse-button`);
    if (details.style.display === "none") {
      details.style.display = "table-cell";
      caret.style.transform = "rotate(180deg)";
    } else {
      details.style.display = "none";
      caret.style.transform = "rotate(0deg)";
    }
  };