JSFiddle - React, Tailwind, and code Playground

HTML

<table id="newtable">
    <thead>
        <th>Room No</th>
        <th>AC</th>
        <th>Deluxe</th>
        <th>Tariff</th>
    </thead>
    <tbody>
        <tr>
            <td class="nr">101</td>
            <td>True</td>
            <td>False</td>
            <td>$67</td>
            <td><button type="button" class="mybutton">Pay</button> </td>
        </tr>
        <tr>
            <td class="nr">201</td>
            <td>True</td>
            <td>True</td>
            <td>$97</td>
            <td><button type="button" class="mybutton">Pay</button> </td>
        </tr>
    </tbody>
</table>

CSS

tbody tr {
    background-color: #4B476F;
}

tbody tr:hover {
    background-color: gold;
}

JavaScript

var buttons = document.querySelectorAll('#newtable tbody .mybutton');

function buttonClicked(e) {
    var button = this,
        cell = button.parentElement,
        row = cell.parentElement,
        firstCell = row.querySelector('td');
    alert(firstCell.innerHTML);
}

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', buttonClicked);
}