JSFiddle - React, Tailwind, and code Playground

by pikitemplates

HTML

<div class='item-all'>
<div class='item-save' data-id='123'>
Save1
</div>
<div class='item-save' data-id='124'>
Save2
</div>
<div class='item-save' data-id='125'>
Save3
</div>
<div class='item-save' data-id='126'>
save4
</div>
</div>
<hr/>
<div class='item-append'>
<div class='close'></div>
</div>

CSS

.item-save {
    position: relative;
    display: block;
    font-size: 14px;
    width:80px;
    margin: 5px;
    padding: 5px;
    background: #a5a5a5;
    text-align: center;
    cursor: pointer;
}
.productad{background:red;color:#eee}

JavaScript

$('.item-all .item-save').click(function() {
  $(this).toggleClass('productad')
  window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('productad'));
});
$('.item-all .item-save').each(function() {
  var id = 'test' + this.dataset.id;
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    $(this).clone().appendTo('.item-append');
  }
});
$(".item-all .item-save").click(function() {
  var existing = $(".item-append [data-id=" + $(this).data("id") + "]");
  if (existing.length > 0)
    existing.remove();
  else
    $(this).clone().appendTo('.item-append');
});
$(".close").click(function() {
localStorage.removeItem("'test' + this.dataset.id"), $(this).removeClass('productad');
  
});