JSFiddle - React, Tailwind, and code Playground

by ricobenviaje11

HTML

<div class="comp-abbr active">Value One</div>
<div class="comp-abbr">Value Two</div>
<div class="comp-abbr">Value Three</div>

<div class="saveBtn">Click me</div>

<div class="iresult">Change my value</div>

CSS

div{padding:0.5rem;margin:0.5rem;border:1px solid grey}
.saveBtn{color:red}
.iresult{color:green}

JavaScript

/* $(".comp-abbr").on("click", function() {
    $(".comp-abbr").removeClass("active");
    $(this).addClass("active"); 
});

$(".saveBtn").on("click", function(){
    var abbr = $(document).find('.active.comp-abbr').text();

    localStorage.setItem('test', abbr);
    $(".iresult").html( localStorage.getItem('test') );
});

$(function() { 
const abbr = localStorage.getItem('test'); 
if (abbr) $(".iresult").html(abbr); 

}

); */

$(".comp-abbr").on("click", function() {
    $(".comp-abbr").removeClass("active");
    $(this).addClass("active"); 
});

$(".saveBtn").on("click", function(){
    $(".iresult").html($('.active').text());
});