how to bold a text in a row of table when it is unread and how to unbold when already read using javascript

I'm trying to bold text in my row and unbold when its already click just like gmail messages. On a particular row, when the text is clicked the text of that row would get unbold.

<td ><a  href="/webmcr/birthverifyview/<?=$veri['rreg_transactcode']?>" class="stretched-link" style="text-decoration: none; color: black;"><?= $veri['rreg_transactcode'] ?></a></td>
                                                            <td><?= $veri['rb_fname'] ?> <?= $veri['rb_mname'] ?> <?= $veri['rb_lname'] ?> </td>
                                                            <td><?= $veri['rb_createdat'] ?></td>

here is the example of my row that I want to get bold and unbold when its open

Bind click Event and on the Event Handler function unbold the text using CSS. Here is the example code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const messageIds = JSON.parse(localStorage.getItem("messageIds"));
var messageIdsArr = messageIds ? Array.from(messageIds) : [];

document.querySelectorAll("td").forEach((td) => {
  // Check if message already read or not
  if (messageIdsArr.length && messageIdsArr.includes(td.getAttribute("id"))) {
    td.style.fontWeight = "normal";
  } else {
    td.addEventListener("click", removeBold);
  }
});

function removeBold(e) {
  const target = e.currentTarget;
  target.style.fontWeight = "normal";

  // Update the LocalStorage
  messageIdsArr.push(target.getAttribute("id"));
  localStorage.setItem("messageIds", JSON.stringify(messageIdsArr));
}

<!-- language: lang-css -->

td{
  border: 1px solid black;
  font-weight: bold;
  cursor: pointer;
}

<!-- language: lang-html -->

 <table>
  <thead></thead>
  <tbody>
    <tr>
       <td id="1">Message 1</td>
       <td id="2">Message 2</td>
       <td id="3">Message 3</td>
    </tr>
  </tbody>
 </table>

<!-- end snippet -->

Unique Id has given to each message. And then use localStorage to store the id of message that has been read. So, even on page load, the read message will not be bold.

Note that, the code will not run on stackoverflow snippet because localStorage is restricted in snippet. But will work fine, outside of snippet. Hope it will be helpful.