[FIXED] how to fix onClick button for append functions?

Issue

Here I work on a project where I want to implement open and close buttons but I am not able to do

currently, it's a close button for both, I need to add separate open and close buttons so that when the user clicks on open then it's open and when someones click on close then it should close properly also when I click continuously close then buttons freezes for sometime

Here is the demo of my JSFiddle Demo

please check the js Fiddle demo where buttons doesn't work properly

Here is the code

function createItem(item) {
  var elemId = item.data("id");
  var clonedItem = item.clone();
  var newItem = $(`<div data-id="${elemId}"></div>`);
  newItem.append(clonedItem);
  newItem.appendTo('.item-append');
}

function countSaveItems() {
  $('.count').html($(".item-append div.item-save[data-id]").length);
}
$('.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).data("id");
  $(this).append(`<button class='close'>Close</button>`);
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
    countSaveItems();
  }
});
$(".item-all .item-save").click(function() {
  var elemId = $(this).data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  if (existing.length > 0) {
    existing.remove();
  } else {
    createItem($(this));
  }
  countSaveItems();
});
$(".item-append").on("click", ".close", function() {
  var id = $(this).parent().data("id");
  localStorage.removeItem(`test_${id}`);
  $(`.item-save[data-id='${id}']`).removeClass('productad');
  $(this).parent().remove();
  countSaveItems();
});

.item-save {
  position: relative;
  display: block;
  font-size: 14px;
  margin: 5px;
  padding: 5px;
  background: #a5a5a5;
  float: left;
  text-align: center;
  cursor: pointer;
}

.productad {
  background: red;
  color: #eee
}

.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div class='item-append'>
</div>
<div class='count'>0</div>

Any Kind of help or suggestion is highly appreciated

Solution

To do the effect you need to add the open button into the HTML because that will be static, then switch between "Open" and "Close" when the user clicks into the "Open" or close the item, also needs to fix the local storage instead of removing in the close button just switch the value to false and validate based on that value. check the following code to see if that is what you are looking for:

function createItem(item){
    var elemId = item.data("id");
    var clonedItem = item.clone();
    var newItem = $(`<div data-id="${elemId}"></div>`);
    newItem.append(clonedItem);
    clonedItem.children('.open').remove();
    clonedItem.append(`<button class='close'>Close</button>`);
    newItem.appendTo('.item-append');
}

function countSaveItems(){
    $('.count').html($(".item-append div.item-save[data-id]").length);
}

$('.item-all .item-save').click(function() {
  var id = $(this).data("id");
  var lsId = `test_${id}`;
  
  $(this).toggleClass('productad');
  
  if (!$(this).hasClass('productad')){
    window.localStorage.setItem(lsId, false);
    $(this).children(".open").html("Open");
    createItem($(this));
  }else{
    window.localStorage.setItem(lsId, true);
    $(this).children(".open").html("Close");
    $(`.item-append div[data-id='${id}']`).remove();
  }
  countSaveItems();
  
});

$('.item-all .item-save').each(function() {
  var id = 'test_' + $(this).data("id");
  
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
  }
  countSaveItems();
});

$(".item-all .item-save").click(function() {
  var elemId = $(this).data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  if (existing.length > 0){
    existing.remove();
  }else{
    
    createItem($(this));
  }
  countSaveItems();
});

$(".item-append").on("click", ".close", function() {
    var id = $(this).parent().data("id");
    window.localStorage.setItem(`test_${id}`, false);
    $(`.item-save[data-id='${id}']`).removeClass('productad');
    $(`.item-save[data-id='${id}']`).children(".open").html("Open");
    $(this).parent().parent().remove();
  countSaveItems();
});

.item-save {
  position: relative;
  display: block;
  font-size: 14px;
  margin: 5px;
  padding: 5px;
  background: #a5a5a5;
  float: left;
  text-align: center;
  cursor: pointer;
}

.productad {
  background: red;
  color: #eee
}

.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='item-all'>
    <div class='item-save' data-id='123'>
        Save1 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='124'>
        Save2 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='125'>
        Save3 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='126'>
        Save4 <button class='open'>Open</button>
    </div>
</div>
<div class='item-append'></div>
<div class='count'>0</div>

Answered By - Jose Lora

Answer Checked By - Marilyn (PHPFixing Volunteer)