JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <table>
        <thead>
            <tr>
                <th>Titulo 1</th>
                <th>Titulo 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Campo 1</td>
                <td>Campo 2</td>
                <td><a href="#" class="activate">Ativar</a></td>
            </tr>
            <tr>
                <td>Campo 3</td>
                <td>Campo 4</td>
                <td><a href="#" class="activate">Ativar</a></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

th,td {
    border: 1px solid #000;
}

JavaScript

$(document).on("click", ".activate", function (e) {
    e.preventDefault();
    
	alert("Ativei");
   	$(this).removeClass("activate").addClass("deactivate").html("Desativar");
});

$(document).on("click", ".deactivate", function (e) {
    e.preventDefault();
    
	alert("Desativei");
    $(this).removeClass("deactivate").addClass("activate").html("Ativar");
});