Javascript – Sort columns in table by date while rows content changes

I have a table/Div like the one below, and the data is generated dynamically in real time so the rows keep coming and changing.

The table is floating on my browser, I dont have control over the source website so I cannot use jquery to modify the table. I can ONLY use javascript, (by using the browser extension) to alter the DOM.

I need the javascript code that can:

  • sort the table by the date and time – newest on top
  • highlight rows that have the word: “blocked”
  • hide rows that have the word: “unknown” (but make the rows appear when the content is changed to something else)
  • keep sorting when timeCell or descriptionCell is updated in any row (or maybe run the sorting every 30 seconds)

I am not familiar with the modern JS code but I think that the date time can be changed to unix timestamp so it make the sorting easier.

I tried to use Chrome browser extension called: Javascript Injector and some javascript code that uses const, i.e: const tabledoc = document;

But when I click the update button of the extension, it will show me some error that says tabledoc is already defined.

Can you please help me?

<div class="container-QqYJdG">

<div class="wrapper-QqYJdG">
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">MacKenzi</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>1:59:08 PM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Sophia</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:10:00 AM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Luc</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:40:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Daniel</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">status: unknown</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:32:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Michael</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">is blocked</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:49:02 AM</span></div>
  </div>

  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Vova</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>3:02:01 PM</span></div>
  </div>
</div>

</div>