Javascript - LocalStorage не работает для меня

Question

У меня серьезная проблема с моим скриптом LocalStorage (я новичок уровня 0), и у меня нет цели.

Я пытаюсь сохранить в правом столбце ("#derecha"), и с LocalStorage клонированы div, и скрипт работает плохо.

Цель:

# 1) - Сохраните клонированный div в правом столбце, независимо от того, виден он или нет перед перезагрузкой страницы.

# 2) - Сохраните результат счетчиков, независимо от их значения, до перезагрузки страницы.

# 3) - Сохраните div серый («show»), независимо от того, видим он или нет во время перезагрузки страницы.

СМОТРЕТЬ В ЖИВОЙ ДЕМО (jsfiddle)

ПРИМЕЧАНИЕ: Если вы посмотрите и перезагрузите страницу в своих тестах, клонированные элементы div, даже если они будут удалены, снова появятся после перезагрузки страницы.

Что я здесь не так делаю, и какое было бы наилучшее решение ...?

Заранее спасибо!

HTML + SCRIPT

<div id="container">

<!-- =============== -->
<div id="productos">

<!-- =============== -->

<div id="cont-p1" class="cont-p"><div id="producto-1"><div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png">       </div>Cont-p1 cloned!</div>

<div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div></div>
<!-- =============== -->

<div id="cont-p2" class="cont-p"><div id="producto-2"><div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
  Cont-p2 cloned!</div>

<div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div></div>
<!-- =============== -->

<div id="cont-p3" class="cont-p"><div id="producto-3"><div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
  Cont-p3 cloned!</div>

<div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div></div>
<!-- =============== -->
</div> <!-- // container -->

<div class="derecha"></div>

<div id="comp-p1" onClick="clickME();clickME2();">Clone 1</div>
<div id="comp-p2" onClick="clickME();clickME2();">Clone 2</div>
<div id="comp-p3" onClick="clickME();clickME2();">Clone 3</div>

<div class="cont-num" id="clicks">0</div>
<div class="cont-num" id="clicksdos">0</div>

<div id="mostrar"><span>Show</span></div>

</div>

<script>

// Script that adds and subtracts the clicks

var clicks=0;function clickME(){clicks += 1;
localStorage.setItem('clicks', clicks);
document.getElementById("clicks").innerHTML=clicks}

var clicksdos=0;function clickME2(){clicksdos += 1;
localStorage.setItem('clicksdos', clicksdos);
document.getElementById("clicksdos").innerHTML=clicksdos;

if (clicksdos === 1) {
document.getElementById("mostrar").style.display = "block";
    }
}
if (clicksdos === 0) {
document.getElementById("mostrar").style.display = "none";
    }
function restar() {
if (clicks>0) clicks -= 1;
localStorage.setItem('clicks', clicks);
document.getElementById("clicks").innerHTML=clicks;
    }
function restardos() {
if (clicksdos>0) clicksdos -= 1;
localStorage.setItem('clicksdos', clicksdos);
document.getElementById("clicksdos").innerHTML=clicksdos;
if(clicksdos === 0){
document.getElementById("mostrar").style.display = "none";
    }
};
</script>

---

SCRIPT

// Script that clones the cont-p in the div "right"

 $(document).ready(function() {
      $("#comp-p1").click(function(){
        $("#cont-p1").clone().appendTo(".derecha");
        localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML);
      });
      // =============
      $("#comp-p2").click(function(){
        $("#cont-p2").clone().appendTo(".derecha");
        localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML);
      });
      // =============
      $("#comp-p3").click(function(){
        $("#cont-p3").clone().appendTo(".derecha");
        localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML);
      });

if ((localStorage.getItem("clicks")!=null) && (localStorage.getItem("clicksdos")!=null))
  {
    clicks=parseInt(localStorage.getItem("clicks"));
    clicksdos=parseInt(localStorage.getItem("clicksdos"));
    document.getElementById("clicks").innerHTML=clicks;
    document.getElementById("clicksdos").innerHTML=clicksdos;
  }
  if (localStorage.getItem("html")!=null)
  {
    document.getElementsByClassName("derecha")[0].innerHTML=localStorage.getItem("html")
  }
});

СМОТРЕТЬ В ЖИВОЙ ДЕМО (jsfiddle)