JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div class="mutants rounds flt" data-num="1">1</div>
  <div class="mutantsR rounds frt" data-num="2">2</div>
  <br class="cls" />
  <div class="mutants rounds flt" data-num="3">3</div>
  <div class="mutantsR rounds frt" data-num="4">4</div>
  <br class="cls" />
  <div class="mutants rounds flt" data-num="5">5</div>
  <div class="mutantsR rounds frt" data-num="6">6</div>
  <br class="cls" />

</body>

CSS

body {
  height: 80%;
  width: 50%;
  margin: 0 auto;
}

.mutants,
.mutantsR {
  height: 100px;
  width: 100px;
  border: thick solid red;
}

.rounds {
  border-radius: 50px;
}

.smootheEdges {
  border-radius: 20px;
}

.flt {
  float: left;
}

.frt {
  float: right;
}

.cls {
  clear: both;
}

JavaScript

$(function() {
  //ready() has been written in short form
  for (var key in localStorage) {
    if (key > 0 && key <= $('div').length) {
      var num = key;
      var val = localStorage[key];
      $('div[data-num=' + num + ']').attr('class', val);
    }
  }

  $('.mutants').on('click', function() {
    $(this).toggleClass('rounds').toggleClass('smootheEdges');
    localStorage.setItem($(this).attr('data-num'), $(this).attr('class'));
  });
  //$('.mutantsR').on('click', function() {
  //  $('.mutantsR').toggleClass('rounds').toggleClass('smootheEdges');
  //  $('.mutantsR').each(function() {
  //    SetMutantsRItems($(this).attr('data-num'), $(this).attr('class'))
  //  });
  //});

  function SetMutantsRItems(index, value) {
    localStorage.setItem(index, value);
  }
});