JSFiddle - React, Tailwind, and code Playground

HTML

<button class="lock">Lock</button>
<button class="unlock">Unlock</button>

<div id="output">Output</div>

JavaScript

$(document).ready(function() {
    $(document).on('click', '.lock', function() {
        $('#output').html('Lock!');
        $(this).removeClass('lock')
               .addClass('unlock')
               .html('Unlock');
    });
    
    $(document).on('click', '.unlock', function() {
        $('#output').html('Unlock!');
        $(this).removeClass('unlock')
               .addClass('lock')
               .html('Lock');
    });
});