JSFiddle - React, Tailwind, and code Playground

HTML

<div id="changeClass">
    <div class="donotChange">
        <a href="#" id="toggleLights">Lights off</a>
        </div>
        </div>

CSS

.donotChange {
    background: grey;
}
#changeClass.lightsOff .donotChange {
    background: #000;
}

JavaScript

$(document).ready(function() {
    $("#toggleLights").click(function () {
      event.preventDefault();
      $("#changeClass").toggleClass("lightsOff");
      $(this).text($(this).text() == 'Lights on' ? 'Lights off' : 'Lights on');
    });
});