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"...

JavaScript

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

			$(document).ready(function() {
			  	var payment = JSON.parse(localStorage.getItem('payment'));
			  	
			  	if (!payment.length) {return};
			  	//console.debug(payment);

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