How to remove element on second click

Question

I need to add elements to container on a first click and delete it on a second one. I guess I'm trying to make it super hard while there is a more elegant and clear solution. Fiddle Link

I was thinking of arrays to create a 1st array for clicked elements and the 2nd one for elements that are already in a container. Then filter the first array through the second one and delete those (unmatched) elements from my container.

var click = +$(this).data('clicks') || 0; // Check if contacts cliked first time
if (click % 2 == 1) { // 2nd click
  fruits.splice($.inArray(name, fruits), 1); // Remove Name from an array
  $(".test .single").each(function (index, elem) {
    compArr.push($(this).text());
  });
  keyArr = fruits.filter(i => compArr.indexOf(i) !== -1);
  var i = 0;
  for (; i < keyArr.length; i++) {
    $(".name").each(function () {
      $(".single:not(:contains('" + keyArr + "'))").remove();
    });
  } // I guess problem is here
} else { // 1st click
  fruits.push(name);
  $('.test textarea').css({
    'font-size': '12px',
    'border': '0'
  }).prop('placeholder', '').before('<span class="single">' + name + '></span>');
  $('textarea').val('');
}

$(this).data('clicks', click + 1);

For me, this part doesn't work properly. But I would love to hear any of your suggestions even if the entire logic is wrong. Thanks!

var i = 0;
for (; i < keyArr.length; i++) {
  $(".name").each(function () {
    $(".single:not(:contains('" + keyArr + "'))").remove();
  });
}

Answer 1

I've managed to fix it. Added this code:

let deleteSingle = $('.single');
for (let i = 0; i < deleteSingle.length; i++) {
  for (let j = 0; j < arrayNewKeys.length; j++) {
    if (deleteSingle[i].innerHTML.includes(arrayNewKeys[j])) {
      deleteSingle.eq(i).addClass('a');
      break;
    } else {
      deleteSingle.eq(i).removeClass('a');
    }
  }
}
$('.styleContacts:not(.a)').remove();
if ($('.test > .single.a:only-child')) {
  $('.single.a').removeClass('a');
}

Instead of this:

var i = 0;
for (; i < keyArr.length; i++) {
  $(".name").each(function () {
    $(".single:not(:contains('" + keyArr + "'))").remove();
  });
} // I guess problem is here