How to get more toggle hide/show div with different class

Question

I have a toggle that show or hide a div class. The status toggle is saved in local storage, so after page refresh the desired setting is maintained.

Now I'm trying to get another toggle that performs the same functions on a different class. I tried with a simple copy / paste changing the names of the classes and functions, but it doesn't work.

Can anyone give me a suggestion?

Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/

function save() {   
    var checkbox = document.getElementById("ck1");
    localStorage.setItem("ck1", JSON.stringify(checkbox.checked));  
}

function isChecked(isOn) {
    if (isOn === true) {
        $(".hideme").show();
    } else {
        $(".hideme").hide();
    }
}

//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
    document.getElementById("ck1").checked = checked;

console.log(checked);

$(document).ready(function(){
    isChecked(checked)
    $(".switch input").on("change", function(e) {
    const isOn = e.currentTarget.checked;
    console.log(isOn)
    isChecked(isOn);
  });
}); 

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/

.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<label class="switch">
<input type="checkbox" id="ck1" onchange="save()">
<span class="slider round hide-off"></span>
</label>
<br><br>

<div class="hideme">Please hide me, but bring me back later ;-)</div>

Answer 1

I believe you can have more dynamism by making better use of css selectors and adding an attribute with the same input id to the divs you intend to show/hide.

HTML:

<label class="switch">
  <input type="checkbox" id="ck1">
  <span class="slider round hide-off"></span>
</label>
<br><br>

<label class="switch">
   <input type="checkbox" id="ck2">
   <span class="slider round hide-off"></span>
</label>
<br><br>

<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>

JAVASCRIPT

$(document).ready(function(){
    getLocalStatus()
    $(".switch input").on("change", function(e) {
       const element = e.currentTarget;
       saveStatus(element)
       setLabelVisibility(element.getAttribute('id'),element.checked);
    })
})

function getLocalStatus() {
    const checkboxes = $('input[type=checkbox]');
    checkboxes.each(function(index,checkbox){
        const checkboxId = checkbox.getAttribute('id')
        var currentStatus= localStorage.getItem(checkboxId)
        if (currentStatus == "true") {
            currentStatus = true;
        } else {
          currentStatus = false;
        }
        checkbox.checked = currentStatus;
        setLabelVisibility(checkboxId, currentStatus)
    })
}

function setLabelVisibility(id,status){
   const label = $("#label-" + id + "");
   if(status == false){
      label.hide();
      return;
   }
   label.show();
 }

 function saveStatus(e) {   
    localStorage.setItem(e.getAttribute('id'), e.checked)
 }