JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th scope = "col">Data</th>
            <th scope = "col">View</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><p class="details-btn">+</p></td>
        </tr>
       <tr>
            <td>2</td>
            <td><p class="details-btn">+</p></td>
        </tr>
        <tr>
            <td>3</td>
            <td><p class="details-btn">+</p></td>
        </tr>
        <tr>
            <td>4</td>
            <td><p class="details-btn">+</p></td>
        </tr>
        <tr>
            <td>5</td>
            <td><p class="details-btn">+</p></td>
        </tr>
        <tr>
            <td>6</td>
            <td><p class="details-btn">+</p></td>
        </tr>
    </tbody>
</table>

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 1.1em;
}

table {
    border: 1px solid;
    text-align: center;
}

thead {
    background-color: #ddd;
}

th {
    border-bottom: 1px solid;
}

td {
    width: 140px;
}

.details-btn {
    background-color: #dad1ea;
    width: 50px;
    margin: 4px auto;
    border: 1px solid #4b3575;
    border-radius: 5px;
    cursor: pointer;
}

.selected {
    color: #fff;
    background-color: #4b3575;
}

JavaScript

$(".details-btn").on("click", function(){
    var $this = $(this);
    //Add/Remove selected for button
    $(".details-btn").removeClass("selected");
    $this.toggleClass("selected");
    
});