JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#" id="lock" class="lockaction" >Lock</a></li>
      </ul>
    </div>
  </div>

JavaScript

$(".lockaction").click(function(e) { 
    e.preventDefault();

            if ($(this).text() === "Lock" ) {
                $(this).text("Unlock");
                $(this).css("background-color", "red");

            } else {

                $(this).text("Lock");
                $(this).css("background-color", "white");
            }

        // postupdate();

    });