显示更多/更少divs越野车

Question

我下面的代码包含2个div和show more/less button的div列表，这很容易出错，因为我的代码能够将random fruits list的值移到total fruits list中，反之亦然。

当我按show more button将所有值移至total fruits之后，按show less将所有值移回random fruits时，某些值将消失。

我要实现的目标是什至不按显示更多按钮，然后将值移动到灰色面板将不会扩展的另一个列表。有什么更好的方法可以使我的当前情况显示更多/更少的按钮？

var hardpill = {};
var domainpill = {};
var suggestpill = {};


var key = "Red Fruits";
hardpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key2 = "Green Fruits";
domainpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key3 = "Random Fruits";
suggestpill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

function redraw() {
  var combineString = '';
  $.each(hardpill[key], function(index) {
    combineString += ('<div class="pilldiv redpill class">' + hardpill[key][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  $.each(domainpill[key2], function(index) {
    combineString += ('<div class="pilldiv greenpill class">' + domainpill[key2][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  var randomString = '';
  $.each(suggestpill[key3], function(index) {
    randomString += ('<div class="pilldiv randompill class">' + suggestpill[key3][index] + '</div>');
  });
  $('.randomclass').html(randomString);
}

function listener() {
  $(document).ready(function() {
    $(document).on("click", "#suggestid div", function() {
      data = this.innerHTML;
      $(".total_count_Green_Fruits").html(key2 + ': ' + domainpill[key2].length);
      var element = $(this).detach();
      $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
    });
  });

  $('body').on('click', 'div.new-green-fruit', function() {
    data2 = this.innerHTML;
    $(this).detach();
    var element2 = $(this).detach();
    $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
  });
}
redraw();
listener();

$('#suggestid,#currentid').find('div:gt(15)').hide();
$(".button1").on("click", function() {
  $('#suggestid,#currentid').find('div:gt(15)').toggle();
});

function change() {
  var elem = document.getElementById("button1");
  if (elem.value == "Show Less") elem.value = "Show More";
  else elem.value = "Show Less";
}

.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.randompill:after {
  content: "\002B";
  float: left;
  width: 16px;
}

.new-green-fruit:after {
  content: "\292B";
  float: left;
  width: 16px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.randompill {
  background-color: LightBlue;
  cursor: pointer;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 85%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}

.top {
  margin-bottom: 30px;
}

.show-button {
  position: relative;
  left: 87%;
  border: none;
  padding: 0;
  background: none;
  text-decoration: underline;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
  <div style="float:left;width:calc(50% - 5px); background-color:#f2f2f2;">
    <h3 class="class center">Total Fruits</h3>
    <div id="currentid" class="combineclass wrappingflexbox top"></div>
  </div>

  <div style="float:right;width:calc(50% - 5px); background-color:#f2f2f2;">
    <h3 class="class center">Random Fruits</h3>
    <div id="suggestid" class="randomclass wrappingflexbox top"></div>
  </div>
</div>
<input onclick="change()" class="button1 show-button" type="button" value="Show More" id="button1" />