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

Question

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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?

This code appears to work properly: https://jsfiddle.net/Twisty/mch7Lxr3/3/ I do not see where `#favorite` is located in HTML. — Twisty, Dec 19 '18 at 07:02
thank you very mouch for your help, so if you add the `
` bottom you see when you click uncheck on clones div is not working correct. — Leo, Dec 19 '18 at 07:47
that what I want to do is when I uncheck from copy div, that need to remove the corect div (not others) and uncheck the original div — Leo, Dec 19 '18 at 07:49
just curious why still using jQuery ? why not React or simple ES6 with web components — STEEL, Dec 20 '18 at 13:22
@STEEL if you have any code or any idea, please show me! Thank you. — Leo, Dec 20 '18 at 13:29

Mark Schultheiss · Accepted Answer · 2018-12-21T19:01:17.637

You have a click handler, so we wire that up to do the storage (will not work here due to sandbox), we also can use data and filter by that, adding an index to each columns container to use to filter the cloned items so we can target them and remove no matter which one is added first.

Here is a fiddle with custom event and slightly more complex storage example: https://jsfiddle.net/MarkSchultheiss/5Luyn18j/47/ done as a fiddle to avoid the sandbox on SO.

Original:

//borrow some code from https://stackoverflow.com/a/15651670/125981
(function($) {
  $.fn.filterByData = function(prop, val) {
    return this.filter(
      function() {
        return $(this).data(prop) == val;
      }
    );
  }
})(window.jQuery);

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

$(function() {
  //add some data
  $('.AvGamesCheckBox').each(function(index, element) {
    $(this).closest('.column').data("checkindex", index);
  });
  // replace [] with the commented out for real stuff
  var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").trigger("change");
});

//* Clone script
$(".avclone").on('change', '.AvGamesCheckBox', function() {
  var checkContainer = $(this).closest('.column');
  var checkIndex = checkContainer.data("checkindex");
  var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
  if (this.checked && !matcher.length)
    checkContainer.clone(true).appendTo("#favorite");
  else
    matcher.remove();
}).on('click', '.AvGamesCheckBox', onClickAvGamesCheckBox);

* {
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>

Addition of the click on the clone: EDIT: added custom event and comment on how to modify for real use

//borrow some code from https://stackoverflow.com/a/15651670/125981
(function($) {
  $.fn.filterByData = function(prop, val) {
    return this.filter(
      function() {
        return $(this).data(prop) == val;
      }
    );
  }
})(window.jQuery);

function onClickAvGamesCheckBox(event) {
  var arr = $(".avclone").find('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  //EDIT: un-comment for real use
  // localStorage.setItem("checked", JSON.stringify(arr));
}

$(function() {
  //add some data
  var checks = $(".avclone").find('.AvGamesCheckBox');
  checks.each(function(index, element) {
    $(this).closest('.column').data("checkindex", index);
  });
  //EDIT replace []; with commented out code for real use
  var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    checks.eq(i).prop('checked', checked);
  });
  //checks.trigger("change");
});

//* Clone script
$(".avclone, #favorite").on('change', '.AvGamesCheckBox', function() {
  var checkContainer = $(this).closest('.column');
  var checkIndex = checkContainer.data("checkindex");
  var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
  if (this.checked && !matcher.length) {
    checkContainer.clone(true).appendTo("#favorite");
  } else {
    $(".avclone").find('.AvGamesCheckBox')
         .eq(checkIndex).trigger('clickcustom');
    matcher.remove();
  }
});
$(".avclone").on('click clickcustom', '.AvGamesCheckBox', onClickAvGamesCheckBox);

* {
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>

Thanks for your help, if i change the `class="AvGamesCheckBox"` and add it on diferent id example: `id="AvGame1"` `id="AvGame2"` `id="AvGame3"` etc, so like this i think is possible, when checkbox is checked to copy the corect div, when ucheck remove the copy div, if user ucheck from copy div remove the copy div, and uncheck the original div? that what I want to do, is to show, favorite games on favorite div, is not important the script can be different. i hope i get help really i have to weeks i try to fix this, thanks again for your help — Leo, Dec 19 '18 at 21:18
@IslamElshobokshy - it works for the question (does the clone on check, removes the clone on uncheck) but the localstorage is sandboxed on SO. Paste it into jsfiddle and it works there. I commented out those two lines to hide that. — Mark Schultheiss, Dec 20 '18 at 11:58
@Leo You would NOT want to use an ID here on a clone, an ID must be unique within the document per HTML specification. This works as I have it - see without the localstorage which does not work on StackOverflow. Uncheck of the copy div is possible also, but would have to have a slight change to the script. — Mark Schultheiss, Dec 20 '18 at 12:04
Note the CSS on the "star" checkbox overlay does seem to need a bit of work, that is perhaps outside the scope of the question a bit. — Mark Schultheiss, Dec 20 '18 at 12:18
@Leo I adjusted the clone to clone the "column" not the "columns" as you had it, that seems to fix the CSS issues. I will look at the event quickly to see if an "uncheck" on the clone can be easily put in to activate as well... — Mark Schultheiss, Dec 20 '18 at 12:34
@MarkSchultheiss thank you very mouch for your help, to be honest, I do not know much about javascript, I test again later, but if possible pleas write the full code to perform the full function, thanks again, I wish you the best. — Leo, Dec 20 '18 at 12:52
Thank you very very mouch for your help, this code is perfect. thanks again — Leo, Dec 20 '18 at 14:53
hello after I add this code on my website, I see when i refresh the page the games are all checked! please when you have time, take a look https://jsfiddle.net/Leo1985/5Luyn18j/14/ Thanks again — Leo, Dec 21 '18 at 02:34
@Leo - you did not replace that storage I commented out `var arr =`, compare to this https://jsfiddle.net/MarkSchultheiss/5Luyn18j/42/ Also the click I modified to a custom event handler so it does not change values when triggered. You can also store a more definitive object as I did here, and renamed the custom event to trigger: https://jsfiddle.net/MarkSchultheiss/5Luyn18j/46/ — Mark Schultheiss, Dec 21 '18 at 18:40
@MarkSchultheiss I tried and this https://jsfiddle.net/MarkSchultheiss/5Luyn18j/47/ but this when uncheck from copy div, did not uncheck the original div, very difficult this kind of code for me, please again! then when you have time show me the full code to do the correct function. Thank you very mouch, — Leo, Dec 21 '18 at 20:14
@Leo This is diverging into another question, "How to keep a clone checkbox in sync" or some such, but using `var org = $(".avclone").find('.AvGamesCheckBox').eq(checkIndex); org.prop("checked",this.checked); org.trigger('mycustomclick');` as here https://jsfiddle.net/MarkSchultheiss/5Luyn18j/58/ — Mark Schultheiss, Dec 22 '18 at 14:19

score 2 · Answer 2 · answered Dec 13 '18 at 05:40

This should work for you. Note: avoid using camelcase classes or ids. Also relying on elements indexes it's not a good idea I would use some sort of identifier to track elements relations.

JS:

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).trigger("change");
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(document).on("change", ".avclone [type='checkbox']", function(e){ 
var column = $(e.target).closest(".column"),
    eq = column.index();
if ($(e.target).prop("checked"))
    column.clone().attr("data-eq", eq).appendTo("#favorite");
else
    $("#favorite .column[data-eq='"+eq+"']").remove();
});

CSS:

* {
  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;
}

#favorite .column .AvGamesCheckmark {
  display: none!important
}

HTML:

<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="AvGamesContainer1" 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>

Thanks for your help, if i change the class="AvGamesCheckBox" and add it on diferent id example: id="AvGame1" id="AvGame2" id="AvGame3" etc, so like this i think is possible, when checkbox is checked to copy the corect div, when ucheck remove the copy div, if user ucheck from copy div remove the copy div, and uncheck the original div? that what I want to do, is to show, favorite games on favorite div, is not important the script can be different. — Leo, Dec 19 '18 at 21:23
This is also missing the favorites being added to local storage, with everything else @Leo said. But it's a good first step. — Alexandre Elshobokshy, Dec 20 '18 at 11:13
Thanks @IslamElshobokshy should be great if you can suggest any code, Thanks again. — Leo, Dec 20 '18 at 11:41

score 2 · Answer 3 · answered Dec 20 '18 at 13:55

@Leo since you asked how to do this in React. DEMO: https://react-krwy1w.stackblitz.io/

CODE: https://stackblitz.com/edit/react-krwy1w?file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

const GAME_IMAGES = [
  {
    title: "some title 01",
    href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  },
  {
    title: "some title 02",
    href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357"
  },
  {
    title: "some title 03",
    href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  },
];


const GameCard = ({title, href, img, onChange}) => {
  return (
    <div className="column">
      <div className="columns">
        <label className="AvGamesContainer">
          <input type="checkbox" name="AvGamesContainer" className="AvGamesCheckBox" onChange={(e) => onChange(e.target.checked, {title, href, img})}/>
          <span className ="AvGamesCheckmark"></span>
        </label>
          <a href={href}>
            <img src={img} title={title}/>
          </a>
      </div>
    </div>
  );
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      display: null
    }
  }

  handleChange(isChecked, obj) {
    this.setState({
        display: isChecked ? obj : null
      });
  }

  render() {
    return (
      <div>
        {
          this.state.display !== null ?
            <div id="favorite">
          {<GameCard {...this.state.display} />}
        </div> : null
        }

        <p>
          Start editing to see some magic happen :)
        </p>
        {
          GAME_IMAGES.map(prop => <GameCard {...prop} onChange={this.handleChange.bind(this)} />)
        }
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Thanks for your help, I solved https://stackoverflow.com/a/53755585/10680754 Thanks again. — Leo, Dec 20 '18 at 14:55

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

3 Answers3

Linked