JSFiddle - React, Tailwind, and code Playground

HTML

<table class="billing dead">
    <tbody>
        <tr>
            <th>Index:</th>
            <td>Long alpha numeric value 1</td>
        </tr>
        <tr>
            <th>Status:</th>
            <td class="status">This text is red to denote urgency.</td>
        </tr>
    </tbody>
</table><!-- end billing dead -->
<table class="billing dead">
    <tbody>
        <tr>
            <th>Index:</th>
            <td>Long alpha numeric value 2</td>
        </tr>
        <tr>
            <th>Status:</th>
            <td>This text is not so urgent.</td>
        </tr>
    </tbody>
</table><!-- end billing dead -->

CSS

.status { color:red;}
table {
     margin: 1ex 0;
    padding: 0px;
    border-collapse: collapse;
    border: 1px solid gray;
}
th, td {
    margin: 0px;
    padding: 0.5ex 1em;
    vertical-align: top;
    text-align: left;
    border: 1px solid gray;
}
th {
    background: wheat;
    font-weight: bold;
}

JavaScript

//--- Find all the "Index" headers.
var indexHdrs   = $("table.billing.dead th:contains(Index)");

//--- Wrap them all in a button, for example.
indexHdrs.each ( function () {
    $(this).wrapInner ('<button class="myButton" />');
} );

/*--- Activate the buttons.  In this case they just display matchinge
    cell contents.
*/
$("table.billing.dead th button.myButton").click ( function () {
    var jThis           = $(this);  //-- The button that was clicked.
    var matchingCell    = jThis.parent ().next ();
    alert (matchingCell.text () );
} );