Javascript on checked box clone this div, on unchecked remove this div

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, accompanied by localStorage. Can someone help me to fix this?

function onClickAvGamesCheckBox() {
        var arr = $('.AvGamesCheckBox').map(function() {
        return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
        var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
  $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(".avclone :checkbox").change(function(){
var name = $(this).closest("div").attr("name");
if (this.checked)
    $(".columns[name=" + name + "]").clone().appendTo("#favorite");
else
    $("#favorite .columns[name=" + name + "]").remove();
});

* {
  box-sizing: border-box;
  padding: 5px;
}
.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}
.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
  z-index: 5;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.AvGamesContainer:hover input ~ .AvGamesCheckmark {
  background-color: #fff;
}
.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark:after {
  display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}
img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}
img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -webkit-filter: saturate(150%);
}
.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}
.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="avclone"> 
<div class="column">
  <div class="columns">
  <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label> 
<a href="https://games.softgames.com/games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
</div>
</div>

<div class="column">
  <div class="columns">
  <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
<a href="https://games.softgames.com/games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
  </div>
</div> 

</div>
<div id="favorite"></div>

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, accompanied by localStorage. Can someone help me to fix this?

from Javascript on checked box clone this div, on unchecked remove this div