JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

  <li class="sel_all_modes">
    <input type="checkbox" value="All" id="sel_all_modes" name="sel_all_modes" class="cmn">
    <span class="sel_All">Select All</span> </li>
  <li>
    <input type="checkbox" value="Cash" name="cb_modes[]" class="cmn">
    <span>Cash</span> </li>
  <li>
    <input type="checkbox" value="Master Card" name="cb_modes[]" class="cmn">
    <span>Master Card</span> </li>
  <li>
    <input type="checkbox" value="Visa Card" name="cb_modes[]" class="cmn">
    <span>Visa Card</span> </li>
  <li>
    <input type="checkbox" value="Debit Cards" name="cb_modes[]" class="cmn">
    <span>Debit Cards</span> </li>
  <li>
    <input type="checkbox" value="Money Orders" name="cb_modes[]" class="cmn">
    <span>Money Orders</span> </li>
  <li>
    <input type="checkbox" value="Cheques" name="cb_modes[]" class="cmn">
    <span>Cheques</span> </li>
  <li>
    <input type="checkbox" value="Credit Card" name="cb_modes[]" class="cmn">
    <span>Credit Card</span> </li>
  <li>
    <input type="checkbox" value="Travelers Cheque" name="cb_modes[]" class="cmn">
    <span>Travelers Cheque</span> </li>
  <li>
    <input type="checkbox" value="Financing Available" name="cb_modes[]" class="cmn">
    <span>Financing Available</span> </li>
  <li>
    <input type="checkbox" value="American Express Card" name="cb_modes[]" class="cmn">
    <span>American Express Card</span> </li>
  <li>
    <input type="checkbox" value="Diners Club Card" name="cb_modes[]" class="cmn">
    <span>Diners Club Card</span> </li>
</ul>

JavaScript

$('.cmn').on('click', function() {
  var fav, favs = [];
  $('.cmn').each(function() { // run through each of the checkboxes
    fav = {class: $(this).attr('class'), value: $(this).prop('checked')};
    //console.debug(fav);
    favs.push(fav);
  });
  localStorage.setItem("payment", JSON.stringify(favs));
});

$(document).ready(function() {
  var payment = JSON.parse(localStorage.getItem('payment'));

	//console.log(payment);
  
  if (!payment.length) {return};
  //console.debug(payment);

  for (var i=0; i<payment.length; i++) {
    console.log("."+payment[i].class);
    $("."+payment[i].class+':eq('+i+')').prop('checked', payment[i].value);
  }
});